在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:<div style="clear:both;"></div>。 例如: <div style="background:#666;"> <!-- float container --> <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div> </div> 此时预览此代码,我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动,而脱离了文档流,导致父元素的height为零。 若将代码修改为: <div style="background:#666;"> <!-- float container --> <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div> <div style="clear:both"></div> </div> 注意,多了一段清理浮动的代码。这是一种好的CSS代码习惯,但是这种方法增加了无用的元素。 这里有一种更好的方法,将HTML代码修改为: <div class="clearfix" style="background:#666;"> <!-- float container --> <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div> </div> 定义CSS类,进行“浮动清理”的控制:
.clearfix:after{
content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.clearfix{
zoom:1;
}