对于我这类初学者来说,清除浮动是我们在写css的时候经常遇到的问题
方案一:在浮动元素外设置一个父元素,将父元素的height属性设置为浮动元素不溢出父元素的高度
这是我这次写项目最常用的解决方案,不过倘若浮动元素有变或需要zishiy也要修改,不太提倡用于会变动的浮动元素里
方案二:在浮动元素外设置一个父元素,将父元素的overflow属性设置为auto
《精彩绝伦的CSS》里提到的一个方法,如果想保证避开IE6的小问题,那么就应为该父元素设置一个明确的width属性(auto之外的值)。
另外有一点要注意,overflow的auto值意味着浏览器可以在该父元素上添加滚动条,实际操作中不一定会出现。
方案三:在浮动元素外设置一个父元素,将父元素也浮动起来,把float设为left或right
《精彩绝伦的CSS》里提到的另一个方法。这种方案之所以会起作用是因为浮动本身就是被定义为用来包裹任何浮动的后代元素,最好给该父元素明确定义一个width值(除了auto)。否则的话,让浏览器自行决定父元素多宽多窄很危险,结果不可预知。不过还有一个问题是,父元素也浮动起来了。个人感觉该方法不太好用,不推荐
方案四:在浮动元素外设置一个父元素,为该父元素设置一个伪类,CSS属性如下:
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both; }
该方案在父元素后添加了一小部分内容但把它隐藏起来了,以达到清除浮动的效果。但是,该方案在IE6上实现相同效果还需要额外的代码。
(摘自)
方案五:在浮动元素后添加一个div,<div style="clear: both;"></div>
有点类似换行的感觉(同样摘自)
总结一下,个人还是比较推荐方案二,或者将方案三及方案五结合起来(也就是说让父元素浮动起来,同时在该父元素后添加上<div style="clear: both;"></div>)