清除浮动的方式

2017-04-19 本文已影响52人隔壁的UNCLE张

在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了父容器好像空容器一样。

如图：

解决浮动的方法##

方法一、

手动设置父元素的高度为合适的值，达到撑起父元素的效果。这种方法的优点是简单、代码少、容易掌握；但是，只适合高度固定的布局，要给出精确的高度。如果高度和父级div不一样时，会产生问题。

方法二、

浮动父元素。索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动。这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。

方法三、

利用clear:both属性。在浮动元素下方添加一个非浮动元素：<div style="clear: both">，或者以类名的方式添加.clearfix，clearfix{clear:both}。原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。优点是简单、代码少、浏览器支持好、不容易出现怪问题；缺点是如果页面浮动布局多，就要增加很多空div。在页面中增加冗余标签，违背了语义网的原则。

方法四、

让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。用上overflow属性。这种方法的缺点主要有二个，一个是IE 6、7不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

图片截自：http://www.educity.cn/wenda/8490.html

解决ie6、7兼容问题，可以在父元素添加zoom: 1;属性

可以使用overflow属性的auto、scroll和hidden值来清除浮动。若内容太大，auto、scroll会出现滚动条，太丑了，但也保持了原有的内容；hidden会裁剪元素，超出元素框边界的内容不可见，并且不利于seo。

参考链接：深入理解CSS溢出overflow

方法五、

父元素定义伪类:after 和 zoom

代码：

.clearfix::after{
    content: ' ';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.clearfix {
    *zoom: 1;
}

原理：类似于clear:both方法，利用:after在元素内部插入元素块，从而达到清除浮动的效果。

clearfix是父容器的class名称。
content:' ';是在父容器的开头或结尾处放一个空白字符。
display: block;确保这个空白字符是独立区块

ps：content: ''; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。

height: 0;让所添加的空白字符为0高度
visibility:hidden;令浏览器渲染它，但是不显示。并且防止溢出
clear: both;清除浮动，让后面添加的子元素不找前面的左右浮动。

*zoom:1添加一条IE 6的独有命令,这条命令的作用是激活父元素的hasLayout属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。

简而言之，*zoom:1是为了兼容IE6、7

终极版一、

Nicolas Gallagher贴出了更通用的生产代码。

/**
 * 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.
 */
.clearfix:before,
.clearfix:after {
    content: ' ';      /* 1 */
    display: table;    /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

content:' ';（注意内容字符串中的空格）避免了一个 Opera错误，

:before可以防止顶部边距在现代浏览器中崩溃。这有两个好处：它确保与其他浮动控制技术的视觉一致性，从而创建新的块格式化环境，例如， overflow:hidden；当使用IE 6/7*zoom:1时，它确保视觉一致性。

:after用于清除浮体。
因此，不需要隐藏任何生成的内容，并且减少所需代码的总量。

display:table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成BFC。

BFC：即Block Formatting Context 直译为“块级格式化范围”。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与容器外部的毫不相干。BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，上面的方法四（如 overflow 方法）就是触发了父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。

触发 BFC 的条件如下：

浮动元素，float 除 none 以外的值
绝对定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-blocks，table-cells，table-captions
overflow 除了 visible 以外的值（hidden，auto，scroll）

在 CSS3 中，BFC 叫做 Flow Root，并增加了一些触发条件：

display 的 table-caption 值
position 的 fixed 值，其实 fixed 是 absolute 的一个子类，因此在 CSS2.1 中使用这个值也会触发 BFC ，只是在 CSS3 中更加明确了这一点。

详见：
　　　详说清除浮动
　　　详说 Block Formatting Contexts (块级格式化上下文)

终极版二、

.clearfix:after { 
    content:"\200B"; 
    display:block; 
    height:0; 
    clear:both; 
} 
.clearfix {
    *zoom:1;    /*IE/7/6*/
}

:content:"\200B";Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden;。

参考：
浮动元素容器的clearing问题
 css清除浮动float的三种方法总结
 深入理解CSS溢出overflow
A new micro clearfix hack
clearfix清除浮动进化史
 详说 Block Formatting Contexts (块级格式化上下文)
详说清除浮动
 关于Block Formatting Context－－BFC和IE的hasLayout