CSS 清除浮动

使用clear属性清除浮动

在容器尾部添加空元素

<style type="text/css">
   .clear {
        clear: both;
    }
</style>
<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
</div>

为容器添加伪类

<style type="text/css">
    .news {
        *zoom: 1; //这里的 IEhack 指的是触发 hasLayout。
    }
    .news:after {
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
    }
</style>
<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
</div>

使用overflow:hidden 或者 overflow:auto；触发父元素的BFC。

<style type="text/css">
    .news {
    overflow: hidden;
        *zoom: 1; //这里的 IEhack 指的是触发 hasLayout。
    }
</style>
<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
</div>

给容器也添加浮动属性