有关BFC
师傅今天的每日一题是BFC，然后我就屁颠屁颠过去查了。只是查的资料上的一些内容，BFC在应用中频繁遇到。 ![有关BFC - 妖孽 - 妖孽]( "有关BFC - 妖孽 - 妖孽")
![有关BFC - 妖孽 - 妖孽]( "有关BFC - 妖孽 - 妖孽")
第一，先了解什么是BFC（Box Formatting context),formatting context是一个决定如何渲染文档的容器。因此box的元素会以不同的方式渲染。
block-level box:display属性为block,list-item,table的元素，会生成block-level box。并参与block fomatting context.
inline-level box:display属性为inline,inline-block,inline-table的元素，会生成inline-level block。并参与inline formatting context.
Foematting context是一面中一块渲染区域，并有一套渲染规则，他决定了其子元素如何定位，以及和其他元素的关系和相互作用。
BFC 译为块级格式化上下文，他是一个独立的渲染区域，他规定了内部的block-level box 如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
1，内部的box会在垂直方向，一个接一个放置。
2,box垂直方向的距离有margin决定。属于同一个BFC的两个相邻的margin会发生重叠。
3， 每个元素的margin box的左边，与包含块的左边相接触，即使存在浮动也是如此。
4.，BFC的区域不予float box重叠。
5， BFC就是页面上一个独立的容器，容器里面的子元素不影响到外面的元素。
6， 计算BFC的高度时，浮动元素也参与计算。
二， 哪些元素会生成BFC？
1，根元素
2，float属性不为none
3，position为absolute或fixed
4，display为inline-block，table-cell,table-caption,flex,inline-flex
5,overflow不为visible
三，BFC的作用和原理
1，自适应两栏布局
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
根据BFC第三条，即使存在浮动，每个元素margin box左边，与包含块左边相接处。
所以就算存在浮动元素.aside,main的作弊爱你依然
与包含块的左边相接触。
那么怎么做呢？根据BFC的区域不予float box重叠，通过出发main生成BFC来适应两栏自适应布局。
及.main{overflow:hidden;}
这个新的BFC不会与浮动的aside重叠，所以生成图如下。![有关BFC - 妖孽 - 妖孽]( "有关BFC - 妖孽 - 妖孽")
2，清除内部浮动
之前只是知道 可以overflow：hidden清除浮动，但具体原理不清楚。
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
根据第六条，我们可以触发BFC，那么par在计算高度时，par内部child也参与计算。
代码：.par{ overflow:hidden;}
效果如下![有关BFC - 妖孽 - 妖孽]( "有关BFC - 妖孽 - 妖孽")
3，防止垂直margin重叠
想防止垂直margin重叠的话，用两个不同的容器去装，并出发该容器变成BFC。
总结
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
因为 BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box 的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局， BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
浙公网安备 33010602011771号