很早的时候, 圆心 就告诫我,「要随时清楚浮动元素」。当时由于忙(也许这算不上是借口),我把他的话当作了耳边风。
今天偏偏在工作最为忙乱的时候,运营那边在添加数据时,发现页面乱了。幸好又是伟大的 圆心 同志帮我找到了这个老问题,并解决(大哥在上,请接受小弟一拜)。
总结下清除浮动的一般解决方案,更多的总结可以 看这里 。
用空标签清除
.clr {clear: both;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<p class="clr"></p>
</div>
使用 overflow 属性
#layout {overflow:auto; zoom:1;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
使用 :after (非 IE 浏览器)
#layout:after{
display: block;
clear: both; content: "";
visibility:hidden; height: 0;
}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
注:使用 :after 需要注意几点,设置高度为零(height: 0;);content 是必须的,但其值可以为空。