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>

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

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

 

posted @ 2016-10-25 14:13  catherinehd  阅读(127)  评论(0编辑  收藏  举报