用float clear和BFC清除浮动 学习总结

0 views

用float clear和BFC清除浮动 学习总结

CSS兼容性 CSS & CSS3 2015-09-09

CSS定位机制有三种，分别是普通流、浮动和绝对定位。浮动能很好地完成一些布局，在页面布局中的地位举足轻重，但也随之带来了不少的副作用，让人即爱又恨。如能消除浮动带来的副作用，浮动还是十分好用的一种布局方式。所谓的清除浮动，目的基本上都是为了消除浮动带来的副作用，常用的清除浮动的方法有CSS clear闭合浮动和触发浮动元素父元素的BFC来闭合浮动。

浮动的工作原理

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
—— 摘抄自W3C School

为什么要清除浮动

当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素，紧邻其后的元素会受到浮动元素的影响；
浮动的元素脱离了普通流，这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑高，这样就会造成高度塌陷；
这样可能
影响兄弟元素还是高度塌陷的问题，会使布局错乱，所以我们需要想办法来清除浮动带来的额外影响。

清除浮动的方法

清除浮动的实质包括三种：CSS clear、BFC特性和触发haslayout。

一. CSS clear清除浮动

清除浮动的属性有clear:left | right | both；

方法1. 空元素+clear

在浮动元素中添加一个空的子元素，如<div class="clear></div>，并定义其样式为.clear { clear: both;}。

方法2：br元素+clear

在浮动元素中添加一个空的子元素，如<br style="clear: both;" />。

方法3：:after+clear+zoom:1

给浮动元素添加伪元素after，并为伪元素定义clear:both；对于不支持:after伪元素的浏览器如IE6~7，可以通过触发haslayout来达到闭合浮动的目的。代码如下：
HTML代码：

<div class="float-left clearfix"></div>

CSS代码：

.float-left { 
    float: left; 
}
.clearfix:after { 
    content: " "; 
    display: block; 
    height: 0; 
    clear: both;
}
.clearfix { 
    *zoom: 1; /* zoom:1是为了触发IE6~7中的haslayout */
}

综上，方法1和2会添加无意义的空标签，有违结构与表现的分离，不建议使用；

二. 触发浮动元素父元素的BFC来闭合浮动

BFC（Block formatting contexts），块级格式上下文，是页面上的一个隔离的独立容器，容器里面的子元素与容器外部元素不会相互影响，即BFC阻止外边距叠加、不重叠浮动并且可以包含浮动。因此我们常利用这点来闭合浮动，以达到消除浮动的副作用。

触发 BFC 的条件如下：
1.根元素(整个页面就是一个大的BFC)；
2.float为 left | right；
3.overflow为 hidden | auto | scroll；
4.display为 inline-block | table-cell | table-caption | flex | inline-flex；
5.position为 absolute | fixed；

具体实现方法有：

方法4：overflow:hidden | auto

<div class="float"></div>

.float {
    overfloat: hidden;
}

备注：不能和position配合使用，因为超出的尺寸会被隐藏；

方法5：父级元素也一起浮动

<div class="parent">
    <div class="float"></div>
    <div class="float"></div>
</div>

.parent, .float {
    float: left;
}

备注：会产生新的浮动问题，不推荐使用；

方法6：父元素设置display:table，子元素设置display:table:cell

被指：盒模型属性改变，并由此会造成一些列问题，不推荐使用；

三. 触发haslayout来闭合浮动

由于IE6~7中不完全支持BFC，但是可以通过触发haslayout来达到闭合浮动的效果。

触发hasLayout的条件：（摘抄自http://www.iyunlu.com/view/css-xhtml/55.html）
position: absolute；
float: left|right；
display: inline-block；
width: 除 “auto” 外的任意值；
height: 除 “auto” 外的任意值；
zoom: 除 “normal” 外的任意值；
writing-mode: tb-rl；
在 IE7 中，overflow 也变成了一个 layout 触发器：
overflow: hidden|scroll|auto （ 这个属性在IE6-没有触发 layout 的功能）；

总结：

建议在支持BFC的浏览器(IE8+, Chrome, Firefox, Safari)中，通过创建新的BFC来闭合浮动；
在不支持BFC的浏览器(IE6~7)中，通过触发hasLayout来闭合浮动；

一个比较通用的清除浮动是方法3，建议使用。

本文作者：凳子_Joinery，转载请注明出处：http://www.dengzhr.com/frontend/css/274