当前位置: 首页 > >

温故知新(八五)BFC 是什么?触发 BFC 的条件是什么?有哪些应用场景?

发布时间:

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.根元素()


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.自适应两懒布局;


?



友情链接: