清除浮动

容器有时候会不包围浮动元素，这时候就要清除浮动。暂时列出下面几种方法：

1、直接在某个元素上应用clear，当没有可用的元素（所有元素都浮动）的时候可以添加一额外元素：

<div class="new">

    <p class="left">some text</p>

    <p class="right">some text</p>

    <br> 

</div>

.news{

    background-color:gray;

    border: solid 1px black;

}

.news .left{

    float:left;

}

.news .right{

    float:right;

}

.news br{

    clear:both;

}

some text

some text

2、直接浮动div容器。

3、将div容器的overflow属性设定为hidden。

4、使用伪元素。

<div class="new clear">

    <p class="left">some text</p>

    <p class="right">some text</p>

</div>

.news{

    background-color:gray;

    border: solid 1px black;

}

.news .left{

    float:left;

}

.news .right{

    float:right;

}

.clear:after{

    content:".";

    height:0;

    visibility:hidden;

    display:block;

    clear:both;

}