web前端快速学习
5分钟学会BFC(Block formatting context)
块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相干。
 
BFC布局规则
1.内部的Box会在垂直方向上一个接一个放置
2.Box垂直方向上的距离由margin决定，同属于同一个BFC的两个相邻的Box的margin会发生重叠（兄弟元素margin重叠问题）
3.每个Box的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
4.BFC区域不会与float-box重叠（两列布局）
5.计算BFC高度时，浮动元素也参与计算
6.BFC是页面上的一个隔离的独立容器，容器里的元素不会影响到外部元素，反之亦然
 
BFC开启方式
1.根元素
2.float不为none
3.position为absolute或fixed
4.overflow不为visible
5.display为inline-block, table-ceil, table-caption, flex, inline-flex
 
2024-10-27
浏览18
登录后评论
1
分享