BFC详解
1、BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box(块)参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
2、BFC的布局规则
1 )、内部的Box会在垂直方向，一个接一个地放置。
2 )、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)、每个元素的margin box的左边，与包含块border box的左边相接触
**解释**：通俗来讲就是margin重叠问题，假设两个上下排列的盒子，上盒子设置margin-bottom;20px; 下面的盒子设置margin-top:30px;其他 什么都不设置的情况下，那么上下盒子的间距取较大值30px；
3)、每个元素的margin box的左边，与包含快的border的左边相接触
**解释**：一个大盒子，你在大盒子里面写div啥的内容，会从左上角加载
4 )、BFC的区域不会与float box重叠。
**解释**：如果两个或者一个设置浮动，就不会发生重叠了，只有两个都不浮动才会发生重叠如果两个或者一个设置浮动，就不会发生重叠了，只有两个都不浮动才会发生重叠
5 )、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
**解释**：但是如果你在当前这个box（隔离独立容器）里设置浮动元素而当前这个box的高度没设置够导致浮动元素超出当前这个box的高或者宽了，那就会影响当前这个box下面结构的box里面的内容了
6 )、计算BFC的高度时，浮动元素也参与计算
**解释**：我们通常会用overflow解决盒子或元素高度塌陷的问题，overflow之后，当前盒子就变成了一个独立的渲染区域，bfc高度中浮动元素参与高度计算也就是为什么overflow可以解决高度塌陷问题的原因了
3、哪些元素或属性能触发BFC
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex；
overflow不为visible；
那么问题来了，float可以解决高度塌陷吗？
答案是可以的，只是说，如果你给被塌陷的盒子加overflow的话，默认盒子宽度是100%的，而给盒子加浮动的话，它的宽度是内容撑大的
4、BFC的作用及原理
1 )、自适应两栏布局
这种写法可以使粉色的区域随着浏览器窗口的变大缩小而适应，一般应用于管理系统
<style>
.aside{width:100px; height:150px; float:left; background:#f66;}.main{height:200px; background:#fcc;}
.main{height:200px; background:#fcc;}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
扩展：双飞翼布局
上面那种写法，如果代码顺序改变了就会改变布局，那么还可以用定位 left，right，top+margin去代替float，这种写法的好处是，不受代码上下文的限制，并且可以率先加载main区域这也是一道双飞翼的面试题
还可以用弹性盒子，自己百度去。。。。
2)、清除内部浮动
<style>
Div{width:500px; border:10px solid #fcc}
P{width:100px; height:100px; border:1px solid #f66; float:left;}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
</body>
这时给div添加overflow : hidden；
3)、防止margin重叠
<style>
P{width:100px; height:100px; background:#fO0; margin:100px:}
</style>
<body>
<p></p>
<p></p>
</body>
给第二个p添加一个盒子并添加overflow:hidden;
就会使他们之间的margin不会发生重叠
扫一扫
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
