什么是 BFC
BFC(块格式化上下文): 是 web 页面可视化渲染 CSS 的一部分, 是布局过程中生成块级盒子的区域. 也是浮动元素与其他元素的交互限定区域.
简单理解就是具备 BFC 特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素.
BFC 常见应用
解决普通文档流块元素的外边距折叠问题
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .demo div {
- width: 40px;
- height: 40px;
- }
- .demo1 {
- margin: 10px 0;
- background: pink;
- }
- .demo2 {
- margin: 20px 0;
- background: blue;
- }
- </style>
- <div class="demo">
- <div class="demo1"></div>
- <div class="demo2"></div>
- </div>
可见两个块元素外边距为 20px.
我们可以使用 BFC 来解决这个问题, 只需要把两个元素置于不同的 BFC 中进行隔离.
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .demo {
- overflow: hidden;
- }
- .demo div {
- width: 40px;
- height: 40px;
- }
- .demo1 {
- margin: 10px 0;
- background: pink;
- }
- .demo2 {
- margin: 20px 0;
- background: blue;
- }
- </style>
- <div class="demo">
- <div class="demo1"></div>
- </div>
- <div class="demo">
- <div class="demo2"></div>
- </div>
BFC 清除浮动
demo 演示:
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .demo {
- border: 1px solid pink;
- }
- .demo p {
- float: left;
- width: 100px;
- height: 100px;
- background: blue;
- }
- </style>
- <div class="demo">
- <p></p>
- </div>
可见容器元素内子元素浮动, 脱离文档流, 容器元素高度只有 2px.
解决方法:
- .demo {
- border: 1px solid pink;
- overflow: hidden;
- }
阻止普通文档流元素被浮动元素覆盖
demo 演示:
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .demo1 {
- width: 100px;
- height: 100px;
- float: left;
- background: pink
- }
- .demo2 {
- width: 200px;
- height: 200px;
- background: blue;
- }
- </style>
- <div class="demo">
- <div class="demo1">我是一个左侧浮动元素</div>
- <div class="demo2">我是一个没有设置浮动, 也没有触发 BFC 的元素</div>
- </div>
demo2 部分区域被浮动元素 demo1 覆盖, 但是文字没有覆盖, 即文字环绕效果.
解决办法就是触发 demo2 的 BFC.
- .demo2 {
- width: 200px;
- height: 200px;
- background: blue;
- overflow: hidden;
- }
自适应两栏布局
demo 演示:
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .container {
- width: 100%;
- }
- .float {
- width: 200px;
- height: 100px;
- float: left;
- background: red;
- opacity: 0.3;
- }
- .main {
- background: green;
- height: 100px;
- overflow: hidden;
- }
- </style>
- <div class="container">
- <div class="float">
浮动元素
- </div>
- <div class="main">
自适应
- </div>
- </div>
如何触发 BFC
根元素或包含根元素的元素
浮动元素(元素的 float 不是 none)
绝对定位元素(元素的 position 为 absolute 或 fixed)
行内块元素(元素的 display 为 inline-block)
表格单元格(元素的 display 为 table-cell,html 表格单元格默认为该值)
表格标题(元素的 display 为 table-caption,HTML 表格标题默认为该值)
匿名表格单元格元素 (元素的 display 为 table,table-row, table-row-group,table-header-group,table-footer-group(分别是 HTML table,row,tbody,thead,tfoot 的默认属性) 或 inline-table)
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout,content 或 strict 的元素
弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
多列容器(元素的 column-count 或 column-width 不为 auto, 包括 column-count 为 1)
column-span 为 all 的元素始终会创建一个新的 BFC, 即使该元素没有包裹在一个多列容器中(标准变更, Chrome bug).
来源: https://juejin.im/post/5c6d7a5cf265da2d9e175182