浮动及清除浮动的方法

1.浮动float

浮动元素脱离文档流，不占据空间。浮动元素直到它的外边缘碰到包含框或另一个浮动框的边框为止。

2.元素浮动有哪些问题？

• 父元素的高度无法被撑开，影响与父元素同级的元素

• 与浮动元素同级的非浮动元素会跟随其后

• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

3.清除浮动的方法

(1)、使用空标签清除浮动

在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签,影响文档结构美观性。

<div style="clear:both"></div>

(2)、使用overflow

给包含浮动元素的父标签添加css属性 overflow:auto;

<div style="overflow:hidden;">
    <div style="float:left">我是浮动的内容</div>
</div>

(3)、使用伪类after清除浮动

父元素添加类名clearfix，这也是经典的清除浮动方法。

.clearfix:after {
  display: block;
  content: " ";
  height:0;
  visibility: hidden;
  clear: both;    
}
.clearfix{
  *zoom: 1;/*兼容ie6*/
}