BFC

BFC的定义

BFC的官方定义之自我理解:符合条件的元素(标签)会为其内容(也就是子元素)建立新的 block formatting contexts(块格式化情景/块格式化上下文/块格式化布局)。
需要符合的条件是(满足其一即可):

  • 浮动元素
  • 绝对定位元素
  • 不是块框的块容器(如inline-block)
  • overflow!=visible的block boxs

这里我更倾向于将BFC类比为Android中的纵向线性布局,即对子元素的布局方式。

BFC的布局方式

BFC对其子元素的布局方式是:

  1. 纵向
  2. 从上往下
  3. 一个挨着一个
  4. 纵向间子元素的距离由margin属性确定
  5. 纵向相邻子元素之间的margin值会发生collapsing-margins
  6. 子元素紧靠左边(对于right-to-left的布局,则是紧靠右边),即使存在float的元素也是如此(哪怕与float子元素发生重叠)
  7. 计算BFC的高度时,浮动元素也参与计算
  8. BFC的区域不会与float的元素区域重叠

三个常见问题及解决方案

  1. 高度塌陷:由于子元素浮动,无标准流中的元素撑起高度,而导致的父元素高度为0的问题。
    方案:父元素变身为BFC即可(计算BFC的高度时,浮动元素也参与计算)
  2. 子div设置margintop,外层div(直系父div)应用该margintop的问题。
    方案:规避margin collapsing即可,设置外层div的padding以达到相同的目的。
  3. 浮动元素遮挡标准流中的元素的问题。
    方案1:被遮挡的元素使用clear属性。
    方案2:被遮挡的元素变身为BFC即可。

参见

MDN-视觉格式化模型
MDN-BFC
BFC原理剖析
学习BFC
CSS之BFC详解

推荐阅读更多精彩内容

  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 401评论 0 4
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 446评论 0 2
  • 一、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 在CSS当中,相...
    dengpan阅读 215评论 0 0
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? CSS浮动的基本概念 浮动模型也是一种...
    Sketch阅读 40评论 0 0
  • 浮动定位 BFC 边距合并 浮动元素 div的顺序是HTML代码中div的顺序决定的。 浮动可以理解为让某个div...
    nianxiaoge阅读 214评论 0 0