总结了几点用于清除浮动的方法:
1、对父级设置适合CSS高度
一般设置高度需要能确定内容高度才能设置。
2、clear:both清除浮动
为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。
3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
4、建立清除浮动的类并应用在包含浮动的父级元素上
.clearfix:after{ content:''; display:block; height:0; overflow:hidden; clear:both; } .clearfix{ *zoom:1; /*针对IE }
改进版:
.clearfix:after{ content:''; display:table; clear:both; } .clearfix{ *zoom:1; }
<div id="div1" class="clearfix"> <div id="div11">div11</div> <div id="div12">div12</div> <div id="div13">div13</div> </div> <div id="div2" class="clearfix"> <div id="div21">div21</div> <div id="div22">div22</div> <div id="div23">div23</div> </div>
注:clearfix应该应用在包含浮动元素的父级元素上。