清除浮动与BFC
2014-08-11 16:49
281 查看
参考资料：
http://www.positioniseverything.net/easyclearing.html 浮动取值的含义
http://www.cnblogs.com/dolphinX/p/3508869.html清除浮动的方法
http://f2e-js.com/?p=2599 BFC详细参考资料
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:
缺点：需要添加额外的
（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，也可以消除浮动。
（2）内部box垂直方向上的间距由margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠
（3）每个内部元素的margin box的左边会与包含块border box的左边相接触，即使存在浮动也会如此。
（4）BFC的区域不会与浮动块重叠。
（5）BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
（6）计算BFC的高度时，它的浮动子元素也参与计算，所以如果想让包含容器计算高度时包括子元素，可以设置包含容器成为BFC。
float不为none；
postion为absolute或者fixed；
display为inlin-block，table-cell，table-caption，flex或者inline-flex；
overflow不为visible；
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以及各个取值的含义
html代码：<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:
二 清除浮动的方法
（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，也可以消除浮动。
三 BFC
BFC （块级格式化上下文），它是一个独立的渲染区域，只有block box参与，它规定了内部块级别的box如何布局，并且与这个外部区域毫不相干。BFC布局规则：
（1）内部的box会在垂直方向，一个接一个地放置。（2）内部box垂直方向上的间距由margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠
（3）每个内部元素的margin box的左边会与包含块border box的左边相接触，即使存在浮动也会如此。
（4）BFC的区域不会与浮动块重叠。
（5）BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
（6）计算BFC的高度时，它的浮动子元素也参与计算，所以如果想让包含容器计算高度时包括子元素，可以设置包含容器成为BFC。
哪些元素会生成BFC?
根元素；float不为none；
postion为absolute或者fixed；
display为inlin-block，table-cell，table-caption，flex或者inline-flex；
overflow不为visible；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用float clear和BFC清除浮动 学习总结
- 由布局学习CSS——浮动清除的深度探究（hasLayout和BFC对浮动的影响）
- 常见样式问题四、利用:after、BFC清除浮动
- 怎样触发BFC清除浮动？
- clear清除浮动最佳实践和BFC清除浮动
- css如何清除浮动（clear和BFC）
- BFC与清除浮动
- BFC原理与清除浮动的关系
- 【css】笔记---BFC和清除浮动
- 那些年我们一起清除过的浮动（BFC特性）
- 清除浮动有关的BFC等知识
- 从图文混排到浮动之BFC清除浮动
- CSS清除浮动原理(涉及BFC)和方法
- 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！
- 深入学习CSS3中的浮动、清除浮动以及BFC
- 清除浮动的4种方式
- 清除浮动的方法及其利弊
- css清除浮动大全，共8种方法
- 页面布局中常用的清除浮动的方法
- CSS清除浮动