浮动

浮动

有几种不同方法可以用来清除浮动，而其中用得最多的是“overflow”技巧和"clearfix"技巧。

Overflow技巧

一种清除浮动的技巧是使用“overflow”属性。在具有浮动元素的父容器中设置“overflow”的属性值为“auto”，这样父容器就会有一个高度存在，在我们例子中的灰色背景也就能看得到了。

不同的浏览器对“overflow”属性解析不一样，在浏览器的显示风格也不一样。看看下面的例子，注意列在不同浏览器的显示效果。
: http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html © w3cplus.com

 

clearfix技巧

根据上下文，清除浮动更好的方法是clearfix技巧。“clearfix”清除浮动的技术是有点复杂，但有有比使用“overflow”技巧清除浮动更好的方法？

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。

":before" 伪元素可以在元素的内容前面插入新内容。":after" 伪元素可以在元素的内容之后插入新内容。

在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。

采取上面同样的例子，你可以看到容器也清除了浮动，元素也可以移到父容器外面：

.parent::before,.parent::after {

  content: "";

  display: table;

}

.parent:after {

  clear: both;}

.parent { *zoom: 1;}         //针对IE