欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

什么是 BFC?触发 BFC 的条件是什么?有哪些应用场景?

最编程 2024-05-30 16:11:18
...

BFC 是什么?触发 BFC 的条件是什么?有哪些应用场景?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


1.概念

BFC(Box Formatting context):box 是 CSS 布局的对象和基本单位,BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也是如此。

块级格式化上下文布局规则:

内部的 BOX 会在垂直方向一个接一个的放置;

属于同一个 BFC 的两个相邻 Box 的 margin 会重叠;不同 BFC 就不会;

是页面上一个隔离的独立容器,里面的元素不会影响到外面的元素;反之亦然;

BFC 的区域不会和 float box 重叠;

计算 BFC 的高度,浮动元素也参与计算;

2.触发条件

概括:

根元素

float 属性不为 none

position 为 absolute 或 fixed

overflow 不为 visible

display 为 inline-block,table-cell,table-caption,flex,inline-flex。

触发条件详细介绍:

1.根元素(<html>)

2.浮动元素(元素的 float 不是 none)

3.绝对定位元素(元素的 position 为 absolute 或 fixed)

4.行内块级元素(元素的 display 为 inline-block)

5.表格单元格(元素的display 为 table-cell,HTML表格单元格默认为该值)

6.表格表体(元素的 display 为 table-cation,HTML 表格标题默认为改制)

7.匿名表格单元格元素(元素的 display 为 table、table-row、table-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)

8.overflow 值不为 visible 的块元素

9.display 值为 flow-root 的元素

10.contain 值为 layout、content 或 paint 的元素

11.弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)

12.网格元素(display 为 grid 或 inline-grid 元素的直接子元素)

13.多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)

3.应用场景

1.清除内部的浮动,触发父元素的 BFC 属性,会包含 float 元素;

防止浮动导致父元素高度塌陷,父级设置 overflow:hidden,元素float:right;

2.分属于不同的 BFC ,可以阻止 Margin 重叠;

避免 margin 重叠,两个块相邻就会导致外边距被折叠,给中间的设置 BFC 就会避免,方法就是套个父级设置 overflow:hidden

3.阻止元素被浮动元素覆盖,各自是独立的渲染区域;

4.自适应两懒布局;

 

推荐阅读