浅谈BFC
BFC全称为：Block Formatting Contexts（块级格式化上下文），通俗一点讲的话，如果我们使用的规则是一所所大学，那么BFC就是一个985或者211的高校。
一. 触发BFC？
只要满足以下任意一点，就可以触发BFC
1．根元素，比如html标签就是一个BFC
2．float的值不是none时
3．overflow的值不是visible时
4．display的值为inline-block/table-cell/table-caption/flex/inline-flex
5．position的值为absolute/fixed
二. BFC的特性
- box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠。
应用：这种方法可以解决为什么margin上下会发生重叠，而我们使用了一系列方法解决它。
- 计算BFC的高度时，浮动元素也参与计算。
应用：可以解释为什么高度塌陷可以用overflow：hidden等方法解决。
- BFC的区域不会与float box发生重叠。
应用：自适应两栏布局或者三栏布局<圣杯布局和双飞翼布局>
4、BFC内部的Box会在垂直方向，一个接一个的放置。
5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素。
三.应用
通俗一点的说，BFC可以看成父子关系和兄弟关系。
1.父子关系
<style type="text/css"> body,ul{margin: 0; padding: 0;} ul{border: 3px solid red;/* overflow: hidden; */} ul li{float: left; list-style: none; border: 1px solid yellow;} </style> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> </body>
由于li设置了浮动，而li的父元素并没有设置高度，从而引起了高度塌陷。
为了解决这一问题，我们可以给父元素ul添加属性overflow:hidden;触发了BFC，BFC规定了浮动的元素也会计算高度，效果如图。
2.兄弟关系
应用：自适应两栏布局或者三栏布局<圣杯布局和双飞翼布局>
（1）我们可以在例1的基础上，添加overflow/display/position，要求满足BFC，就可以实现边距300px的现象了。
（2）自适应三栏
大概结构为：
<body>
<div class="left">1111</div>
<div class="center">2222</div>
<div class="right">3333</div>
</body>
在<style>内添加以下样式，.left .right .center都添加了浮动，满足了BFC，BFC规定：不会与浮动元素发生重叠，从而实现了自定义三栏的效果，后面两种方法的原理也是如此。
.left{width: 100px;height: 200px;background: red;float: left;} .center{height: 400px;background: yellow;width: calc(100% - 300px); float: left;} .right{width: 200px;height: 300px;background: deeppink;float: left;}
（3）圣杯布局
首先，了解一下什么是圣杯布局，如图，为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在DOM结构上优先，以便先行渲染。
<style type="text/css"> body{ margin: 0; padding: 0;} .box{ border: 5px solid red; overflow: hidden;padding: 0 200px 0 100px;} .left{float:left;width:100px;height:200px;margin-left: -100%;position: relative; left: -100px;} .right{float:left;width:200px;height:300px;margin-left:-200px;position:relative; right: -200px;} .center{ float: left;height: 350px;width: 100%;} </style> </head> <body> <div class="box"> <div class="center">中间的区域</div> <div class="left">左边</div> <div class="right">右边</div> </div> </body>
圣杯模式的特点是：
1．结构上先解析center
2．三块之间没有重叠的部分
3．给最大的盒子添加了padding挤进去的
（4）双飞翼布局
双飞翼的布局大致是和圣杯布局相同的，它的结构图如下。
<style type="text/css"> body{ margin: 0; padding: 0;} .box{ border: 5px solid red; overflow: hidden;} .left{float:left;width: 100px;height: 200px;background: yellow;margin-left: -100%;} .right{float: left;width: 200px;height: 300px;background: blue;margin-left: -200px;} .center{ float: left;height: 350px;width: 100%;} .bg{margin: 0 200px 0 100px;background: deeppink;height: 320px;} </style> </head> <body> <div class="box"> <div class="center"> <div class="bg">中间的盒子</div> </div> <div class="left">左边</div> <div class="right">右边</div> </div> </body>
双飞翼布局的特点是
1．结构上先解析center
2．三大块上，最大的中间是和左右重叠的
3．给center里面包了一个小盒子，小盒子给margin挤进去的
四.总结
BFC只是一个容器，他并不会影响外部的其他元素，同时，也可以解决我们常见的浮动、外边框合并等现象。有了它，我们的布局就不会出现意外啦。
浙公网安备 33010602011771号