参考资料:
http://www.positioniseverything.net/easyclearing.html 浮动取值的含义
http://www.cnblogs.com/dolphinX/p/3508869.html清除浮动的方法
http://f2e-js.com/?p=2599 BFC详细参考资料
一 先看看clear属性的取值:none、right、float、both、inherit以及各个取值的含义
<style>
#main{
width:100%;
background-color: pink;
padding:50px;
border:solid 5px #EAFF56;
float:left;
}
#floatToLeft1{
background-color: #F00056;
padding: 50px;
border:solid 5px #F47983;
width:200px;
margin:30px;
float: left;
}
#floatToLeft2{
background-color: #FFB3A7;
padding: 50px;
border:solid 5px #FFA631;
width:250px;
height:500px;
margin:30px;
float:left;
}
#floatToright1{
float:right;
border:1px solid yellow;
width:300px;
height:500px;
}
#floatToright2{
float:right;
border:1px solid yellow;
width:300px;
height:200px;
}
#floatToright3{
float:right;
border:1px solid yellow;
width:300px;
height:200px;
}
#clear{
clear:both;
border:3px solid blue;
text-align: justify;
}
</style>
</head>
<body>
<div id="main">
<div id="floatToLeft1">
my id is floatToLeft1, this box`s float value is left
</div>
<div id="floatToright1" >
my id is floatToright1 this box`s float value is right.
</div>
<div id="floatToLeft2">
my id is floatToLeft2, this box`s float value is left
</div>
<div id="floatToright2" >my id is floatToright2 this box`s float value is right.
.</div>
<div id='clear'>
I am a clear box,I will just influent the box occures me before ,in this context ,it includes #floatToright1 、#floatToright2、 #floatToLeft1 ,#floatToLeft2.Take into a accout of the float value which is both,my top border will touch the bottom edge of the #floatToright1 、#floatToright2、#floatToLeft1 ,#floatToLeft2.
the point is ,that I will ignore the #floatToright3,because it is occures behind.
</div>
<div id="floatToright3">my id is floatToright3,this box float value is right</div>
</div>
</body>
none
No constraint on the box's position with respect to floats.
left
Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
如果取值是left,那么clearbox的上边框就会触碰到任何(准确的说不是任何,而是在clearbox之前的盒子,对“resulted from elements earlier”的理解,下同)左浮动的盒子的下边界。此处写了一个例子,效果如图:
right
Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
如果取值是right,那么clearbox的上边框就会触碰到右浮动盒子的下边界
both
Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.
此处也写了一个例子,和上面的例子代码一样,只不过把clear的属性,换做为:clear:both
inherit
Takes the same specified value as the property for the element's parent.
有关清除浮动的原理:
The W3C suggests placing a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. It's described more fully our article Float: The Theory:
“..let's say you give that following box the clear property, {clear: both;} . What this does is extend the margin on the top of the cleared box, pushing it down until it "clears" the bottom of the float. In other words, the top margin on the cleared box (no matter what it may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.”
So in effect, such a cleared box cannot be at the same horizontal level as a preceding float. It must appear just below that level. The image shows how this might look, with a red border representing the container element:
![Shows how a box may clear below a float.](http://www.positioniseverything.net/articles/images/clear-box.gif)
二 清除浮动的方法
(1) 添加一个div,设置它的clear:both,这样做可以扩展该div的margin-top,直到该div的边框触及到浮动的元素的bottom。
缺点:需要添加额外的
(2) 使用:after伪属性,该属性允许在一个元素的后面插入一个新的内容,,通过设置新插入内容的样式可以做到清除浮动的效果。
缺点:ie8以下都不支持after伪元素。
.clearfix:after{
Content:”.”;
Display:block;//默认的元素的display为inline,而不是block,为了使clear:both生效,需要设置为block
Height:0;
Visibility:hidden;
Clear:both;
}
在最初,使用overflow:hidden,但是在firefox中,可能会让”.”显示,所以使用了height:0,visibility:hidden来隐藏”.”
为了兼容ie需要加入hack,通过设置zoom,可以触发ie的hasLayout属性(元素包含浮动元素,并且不会造成高度塌陷),清除浮动、清除margin的重叠,加入ie hack。
<!--[ifIE]>
<styletype="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
} /*Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use anormal HTML
comment inside the CC or it will closeprematurely. */
</style>
<![endif]à
但是在mac的ie中,它既不会触发hasLayout属性,也不然是after伪属性,但是发现在mac的ie中,通过设置display为inline-block,就可以自动包含浮动元素。
.clearfix{display:inline-block;}
<!—[if IE]>
.clearfix{
Zoom:1;
Display:block;/*需要修正前面设置的display: inline-block*/
}
<![endif]à
(3)通过设置包含元素成为BFC,也可以消除浮动。