css清除浮动代码

css清除浮动代码

什么是CSS清除浮动？

在非IE浏览器（如Firefox、Chrome）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

使用带clear属性的空元素

div的代码

css的代码

.clear { clear: both; }

在浮动元素后面（同一父节点）添加这个空的div即可。

使用邻接元素处理

给浮动元素后面的元素添加clear属性

给父容器增加一个样式

.clearfix:after{

content: "020";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

/* 触发 hasLayout */

zoom: 1;

}