css浮动-阿里云开发者社区

开发者社区> ghost丶桃子> 正文

css浮动

简介:
+关注继续查看

一、浮动介绍

历史:

浮动属性产生之初是为了实现“文字环绕”的效果,让文字环绕图片在网页实现类似word中“图文混排”。

定位方式:

浮动让元素脱离正常流,向父容器的左边或右边移动直到碰到包含容器的边【经测试碰到padding即停】或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。

Note:

1、碰到容器的边指的是容器的padding内边。

举例验证:

复制代码
<style>
.container{
    border: 1px solid green;
    padding: 30px;
    background-color: green;/*将背景裁剪到内容框,方便看浮动元素效果*/
    background-clip: content-box;
}
.fl{
    float: left;
}
</style>
<div class="container">
    文字会环绕在图片周围文字会环绕在图片周围文字会环绕在图片周围文字会环绕在图片周围
    <img class="fl" src="img/wb.jpg">
</div>
复制代码

2、浮动元素脱离正常流,意思是布局时后面元素当它不存在(文字还是当它存在,环绕其身边),但仍然在dom树上

3、如果是在js中通过element.style设置元素浮动,需要用cssFloat,因为float是js中的一个关键字。【IE8及以下浏览器用styleFloat】

如下:

复制代码
<style>
#father{
    border:1px solid red;
}
#test{
  background-color: green;
  /*float: left;*/    
}
</style>
<div id="father">
<span id="test">span内容</span>
</div>
<script type="text/javascript">
    var oSpan=document.getElementById("test");
    oSpan.style["cssFloat" in oSpan.style? "cssFloat" : "styleFloat"]="left";
</script>
复制代码

浮动影响:包裹性和破坏性,下面一一介绍。

二、包裹性

包裹性:这个词是别人总结的,个人觉得总结的恰到好处。

包裹性指的是元素尺寸刚好容纳内容。

具有包裹性的其他属性:

  • display:inline-block/table-cell/...
  • position:absolute/fixed/sticky
  • overflow:hidden/scroll

1、通过例子看看浮动的包裹性

举例:

复制代码
<style>
.container{
    border: 1px solid green;
    padding: 30px;
    background-color: green;
    background-clip: content-box;/*将背景裁剪到内容框,方便看浮动元素效果*/
}
.fl{
    float: left;
}
</style>
<div class="container fl">
内容
</div>
复制代码

2、包裹性的原理

浮动之所以会产生包裹性这样的效果是因为float属性会改变元素display属性最终的计算值

设置float前的display属性——》设置浮动后的display属性计算值

  • inline——》block
  • inline-block——》block
  • inline-table——》table
  • table-row——》block
  • table-row-group——》block
  • table-column——》block
  • table-column-group——》block
  • table-caption——》block
  • table-header-group——》block
  • table-footer-group——》blcok
  • flex——》flex
  • inline-flex——》inline-flex【inline-flex在chrome下测试,float后display:flex】
  • other——》unchanged

经过我测试只有inline-flex在chrome下float后display计算值变为flex,其它都一致。感兴趣的小伙伴可自行测试。

在此给大家提供一个很简单的测试方法:比如就测试inline-flex,可以选择任意标签,这里我用span标签,设置display属性为inline-flex,然后设置float:left。在chrome控制台中style选项查看display属性为inline-flex,切换到computed选项查看display属性为flex,如下图。测试其他值可直接在控制台编辑查看。

复制代码
<style>
.test{
background-color: green;
display:inline-flex;
float: left;    
}
</style>
<span class="test">span内容</span>
复制代码

 可以利用浮动的包裹性来达到父容器自适应内部元素宽度。

三、破坏性

这里破坏性是指元素浮动后可能导致父元素高度塌陷。

其他破坏性的属性:

  • display:none
  • position:absolute/fixed/sticky

浮动破坏性原理:

因为浮动元素被从文档正常流中移除了,父元素当然还处在正常流中,所以父元素不能被浮动元素撑大。

四、清除浮动

1、clear属性

clear属性规定元素的哪一侧不允许有其他浮动元素。

取值:

  • left:元素左侧不允许有浮动元素
  • right:元素右侧不允许有浮动元素
  • both:元素左右两侧均不允许有浮动元素
  • none:默认值,允许浮动元素出现在两侧

 具体原理:在元素上外边距之上增加清除空间,比如清除左浮动会让元素的上外边距刚好在左边浮动元素的下外边距之下。

 清除浮动可两大类方法

  • 兄弟元素设置clear:both
  • 父元素生成BFC(IE8+) 或haslayout(IE6/IE7)

下面具体分析。

2、方法一:兄弟元素设置clear:both

clear:both方法也有下面几种。

a、html层面常用方法

  • 在空 div 元素设置clear : both
  • br 标签的 clear 属性  <br style="clear:both">

举例:

复制代码
<style>
.wrap{
    background-color: green;
}
.fl{
    float: left;
}
</style>
<div class="wrap">
<img class="fl" src="img/wb.jpg" />
<div style=" clear:both;margin-bottom:50px;">兄弟元素设置clear:both</div>
</div>
<p style="margin-top: 50px;">兄弟元素设置clear:both来清除浮动会有margin重叠现象</p>
复制代码

使用这种方法清除浮动,需要注意一点,就是margin重叠,因为清除浮动的元素和除浮动元素之外其他元素还是处于同一个BFC。

代码层面的问题:

  • 用标签来实现样式效果,不符合结构表现分离原则。标签复用变难。
  • 标签没有任何语义
  • 这样写代码不专业
  • 将来有其他清除浮动的方法,你必须回头删掉所以分散在html页面中的<br>标签

b、父元素添加 after 伪元素

因为上面方法的种种弊端,更推荐使用这种父元素添加after伪元素清除浮动的方法。

上面方法是在html层面写的代码,而after伪元素是在css层面写的代码,虽然代码都不多,但站在结构和表现分离的角度看两种方式还是有差的。

代码如下:after在父元素底部生成一个具有clear:both 声明的伪元素来清除浮动。

复制代码
.clearfix::before,
.clearfix::after{
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after{
    clear: both;
}
.clearfix {
    zoom: 1; /* IE < 8 */
}
复制代码

这种方法原理:

通过父元素的::after伪元素来生成浮动元素的兄弟元素,然后兄弟元素使用clear:both方法。

知道这点很重要,举个反例子来说明一下:

复制代码
<style>
.wrap{
    background-color: green;
}
.fl{
    float: left;
}
.clearfix::before,
.clearfix::after{
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after{
    clear: both;
}
</style>
<div class="wrap clearfix">
<img class="fl" src="img/wb.jpg" />
<div >
    父元素的::after伪元素并不是浮动元素【在这里是图片】的相邻的兄弟元素,就达不到清除浮动的效果父元素的::after伪元素并不是浮动元素【在这里是图片】的相邻的兄弟元素,就达不到清除浮动的效果父元素的::after伪元素并不是浮动元素【在这里是图片】的相邻的兄弟元素,就达不到清除浮动的效果
</div>
</div>
复制代码

因为父元素生成的并不是浮动元素相邻的兄弟元素,所以使用clear:both无效,使用时必须注意。

c、一个更简洁的版本

支持浏览器: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

复制代码
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " ";
    display: table; 
}
.cf:after {
    clear: both;
}
/* IE < 8 */
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
复制代码

了解更多可参考micro-clearfix-hack

 zoom是为了兼容IE6,7;:before是为了阻止margin重叠,如果只清除浮动,可用:

.container:after {
  content:"";
  display:table;
  clear:both;
}

3、补充知识:BFC

BFC:块级格式化上下文【在css3中叫Flow Root】是一个独立布局环境,相邻盒子margin垂直方向会重叠。

什么样的元素会为其内容生成一个BFC呢?

  • 浮动元素,即float:left|right
  • 绝对定位元素,即position:absolute|fixed
  • 块容器【block containers】(比如inline-blocks,table-cells和table-captions),这些块容器有个特征就是它们不是块级盒子【block boxes】。即display:table-cell|table-caption|inline-block
  • 设置了除visible外的overflow值的块盒子【blok boxes】,即overflow:hidden|scroll|auto

BFC特性:

  • 创建了BFC的元素中,子浮动元素也会参与高度计算
  • 与浮动元素相邻的、创建了BFC的元素,都不能与浮动元素相互覆盖
  • 创建了BFC的元素不会与它们的子元素margin重叠

4、方法二:父元素生成BFC(IE8+) 或haslayout(IE6/IE7)

正是因为BFC特性中,创建了BFC的元素中,子浮动元素也会参与高度计算,所以可来清除浮动。

常用方法如下:

  • 浮动父元素(触发 BFC)
  • overflow: hidden  (触发 BFC) 
  • display: table或table-cells;(触发 BFC,display:table  本身并不产生 BFC,而是由它产生匿名框,匿名框中包含 "display:table-cell" 的框会产 BFC)

举例:父元素使用overflow:hidden生成一个BFC来清除浮动。

复制代码
<style>
.wrap{
    background-color: green;
    overflow: hidden;
}
.fl{
    float: left;
}
</style>
<div class="wrap">
<img class="fl" src="img/wb.jpg" />
<div style=" margin-bottom:50px;">浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容</div>
</div>
<p style="margin-top: 50px;">浮动元素父元素的兄弟元素内容</p>
复制代码

overflow: hidden;使得包含图片的div生成BFC,所以里面内容元素与外面包含文字的div的margin不会重叠,如上图。

两种清除浮动方法区别:clear:both可以发生margin重叠,BFC隔离不会有margin重叠。

 BFC缺点:

1、不能应用于所有场合,因为不可能所有元素都绝对定位或者不可能所有元素都浮动。

2、现代浏览器不认识zoom1。

5、清除浮动方法总结

每种清除浮动的方法都有弊端,权衡后推荐用法:

复制代码
.clearfix:after{
content:"";
display:block;
height:0;
overflow:hidden;
clear:both;
}
/*IE6和IE7*/
.clearfix{
*zoom:1;
}
复制代码

 或者用:

复制代码
.clearfix:after{
content:"";
display:table;
clear:both;
}
/*IE6和IE7*/
.clearfix{
*zoom:1;
}
复制代码

Note:

.clearfix类只应该用在包含浮动元素的父元素上。【如果不懂这句话再把上文看一遍】

五、浮动布局

1、普通固定布局

通常用的浮动布局一般是:固定尺寸+浮动。

举例:两栏布局

复制代码
<style type="text/css">
  body{
    width: 600px;
  }
  .left{
    width: 150px; float: left; 
  }
.right { width: 450px; float: right; }
  </style>
<body>
  <div class="left">
    <img src="img/wb.jpg"/>
  </div>
  <div class="right">
    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
  </div>
</body>
复制代码

问题:

容错性差:容器尺寸变了,就得改代码。

复用性不好:尺寸固定,模块在另外尺寸容器中不能重用。

2、推荐布局

a、左侧尺寸固定右侧自适应的流体布局

举例:在上面代码基础上修改样式为

复制代码
<style type="text/css">
  .left{
    width: 150px; float: left; 
  }
  /*流体布局*/
.right { margin-left: 150px;}
  </style>
复制代码

重点是使用margin-left,且不要定宽。这样好处是容器尺寸变化右侧可自适应。

b、右侧尺寸固定左侧自适应的流体布局

改变DOM位置的流体布局写法

写代码时顺序为先右后左,这样就可以设置右栏右浮动,左栏设置margin-right。

复制代码
<style type="text/css">
.right{
float: right;
width: 150px;
}
.left{
margin-right: 150px;
}
  </style>
</head>
<body>
<div  class="right">
<img  src="img/wb.jpg">
</div>
<div class="left">
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
</div>
</body>
复制代码

不改变DOM位置的流体布局写法【左右栏都左浮动】

写代码时顺序不变,左右栏都浮动,通过margin调整位置。

复制代码
<style type="text/css">
.wrap {
  width: 100%;
  float: left;
}
.left {
  margin-right: 150px;
}
.right {
  width: 150px;
  float: left;
  margin-left: -150px;
}
  </style>
<body>
<div class="wrap">
    <div class="left">
    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
    </div>
</div>
<div  class="right">
    <img  src="img/wb.jpg">
</div>
</body>
复制代码

效果同上。

大前端w3cplus都是用的这种布局方法。

c、两栏都自适应的布局

原理是左栏浮动,右栏生成BFC,根据BFC特性与浮动元素相邻的、创建了BFC的元素,都不能与浮动元素相互覆盖。

复制代码
<style type="text/css">
.left {
  float: left;
}
.right{
   display: table-cell;
 }
  </style>
<body>
 <div class="left">
    <img src="img/wb.jpg"/>
  </div>
  <div class="right">
    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
  </div>
</body>
复制代码

 

六、float布局和inline-block布局对比

浮动和inline-block都能让元素排成一排,那么应该如何抉择?下面对比一下。

  • 文档流:浮动元素脱离正常流,让文字环绕。inline-block仍然在正常流中。
  • 水平位置:不能通过给父元素设置text-align:center让浮动元素无法水平居中【因为脱离文档流】,而inline-block可以。
  • 垂直对齐:浮动元素紧贴顶部,inline-block默认基线对齐,可通过vertical-align调整。
  • 空白:浮动忽略空白元素彼此紧靠,inline-block保留空白。

举例:浮动布局可以去掉元素之间的空格,而inline-block会保留空格。

复制代码
<style>
button {
    margin: 0;
    float: left;
}
p {
    clear: both;
}
</style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
</body>
复制代码

分析:button默认display:inline-block;可见他们之间有空格的距离。加了float:left后各个button元素之间空格消失。

总结一下:处理文字环绕自然是用浮动,处理图片列表垂直对齐或者横向导航可以选择inline-block。

 

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4608962.html有问题欢迎与我讨论,共同进步。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4020 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6372 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
2188 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5694 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
4964 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
10718 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
3815 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
724 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16292 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载