清除浮动的方法

当出现浮动元素和文字（或其他）在同一个div内会出现显示上的问题，有时候需要清除浮动效果来达成界面上的设计。

比如一个img和p标签，未给img添加浮动时候，p内容在img的下面，如果需要同行显示就需要给img浮动，然后清除img的浮动属性，达到img和p在同一行左右排布。

1：添加非浮动的清除元素

(1)：伪类元素清除浮动

在需要清除浮动元素的外容器添加伪类元素

.clearfix:after {
    content : "";
    display : block;
    height : 0;
    visibility : hidden;
    clear : both;
}


<div class="clearfix">
  <img src="" style="float:left">
  <p>111</p>
</div>

(2)：插入一个用于清除浮动的空元素：

在父元素中添加一个div或其他元素

<div class="clearfix">
  <img src="" style="float:left">
  <p>111</p>
  <div style="clear:both">
</div>

2：overflow属性

在父元素上用使用overflow，hidden或者auto都行。

 

3：IE6下需要设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。