别忘记清除浮动March 25, 2008

很早的时候,圆心 就告诫我,“要随时清楚浮动元素”。当时由于忙(也许这算不上是借口),我把他的话当作了耳边风。

今天偏偏在工作最为忙乱的时候,运营那边在添加数据时,发现页面乱了。幸好又是伟大的 圆心 同志帮我找到了这个老问题,并解决(大哥在上,请接受小弟一拜)。

总结下清除浮动的一般解决方案,更多的总结可以看这里

用空标签清除

.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 是必须的,但其值可以为空。

已有 3 条评论

  1. 嘿嘿,我的basic样式基本上三种都定义了,需要就调用~

    最好用最常用就是第二种~

  2. 怿飞兄的新写的 Blog 《详解 CSS 的优先权》非常的精彩。对于我这样的 CSS 菜鸟而言,真的可以用醍醐灌顶来形容。

    个人认为 CSS 优先权是比较重要的概念,尤其在维护庞大的 CSS 样式时,就显得非常的有用(当然,在样式庞大复杂以后,而不得不采用优先权更改样式,这是种不可取的做法,应该避免出现这种情况)。

    为了方便大家(同时也是本人)理解,我在消化这篇文章时胡乱画了张图示,希望能起到抛砖引玉的作用(但愿不要误人子弟 - 访问大图,或者打包下载)。

    在怿飞的文章中 arthuridea

  3. 学习了,跟p差不多的还有br:
    <br clear="all" />

Yahoo 统计