清理浮动的方法

1.clear属性   属性值：left/right/both/none   表示框的哪些边不能挨着浮动框

  添加一个空元素并清理它

.news{
    background: gray;
    border:1px solid gray;
    }
   .news img{
    width: 100px;
    height: 100px;
         float: left;
    }
    .news p{
    float: right;
    }
    .clear{
    clear: both;
    }

<div class="news">
<img src="">
<p> text</p>
<br class="clear" />
</div>

  添加一个<br>或其他的,添加clear属性，清理它上面的浮动元素，both即清理左浮动和右浮动

缺点：添加了不必要的代码，无意义的标记。

2.可以不对浮动的元素清理，而是浮动div元素<

    .news{
    background: gray;
    border:1px solid gray;
    float: left;
    }
   .news img{
    width: 100px;
    height: 100px;
         float: left;
    }
    .news p{
    float: right;
    }

div class="news">
<img src="">
<p> text</p>

</div>

缺点：但是会对下一个元素产生影响，浮动元素太多，造成布局混乱。

3.使用伪类和内容声明在指定的现有内容的末尾添加新的内容。 例如.clear:after  将它的Height设置成0，visibility设置成hidden，display设置成block就可以对生成的内容进行清理。

.clear::after{

content:"...";

height:0;

visibility:hidden;

display:block;

clear:both;

}

<div class="clear">
<img src="">
<p> text</p>

<div>