float浮动与清除浮动

浮动：

 浮动的框可以左右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止。文档的普通流中的块框会当浮动框不存在一样。但会影响内联框（通常是文本）的排列。

属性值有：left,right,none;

当浮动元素的父元素没有其他元素内容的时候，父元素会出现“勾搭塌陷”的情况，浮动元素脱离了父元素。为了避免这种情况，需要清除浮动。

 

清除浮动：

方法一：

clear：both;

在需要清除浮动的地方都加上这句话可以达到目标，兼容性好。但会增加重复代码。

方法二：

使用overflow:hidder;  或则zoom:1；

浮动元素会回到容器里面。

方法三：

：afte伪元素

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个：after伪元素实现元素末尾添加一个看不见的块元素清楚浮动。

可完美兼容各主流浏览器。

.box{

backgroudn:green;

border:1px solid red;

}

.box img{

float:left;

}

.box p{

float:right;

}

.clearfix:after{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix{

zoom:1;//触发hasLayout,兼容IE6和IE7

}

<div class="box">

<img src="">

<p>text</p>

</div>

用伪元素方法更合适一点。

注：不清除浮动，容器是不能被撑开的，浮动元素脱离在外面，容器的背景，内外边距都无效。