Little steps

BFC解决边距折叠

2020-4-13

什么是边距折叠

当块级元素(block)的上外边距(margin-top)和下外边距(margin-bottom)同时都有设定时只会只会保留最大边距,这种行为称为外边距折叠(margin collapsing)。查看官方文档

比如: margin-bottom: 40, margin-top: 20, 边距为正取大值,最后 两个元素之间边距 40 margin-bottom: 40, margin-top: -20, 最后 两个元素之间边距 40 - 20 = 20 margin-bottom: -40 margin-top: -20 边距为负取小值,最后 两个元素之间边距 -40

BFC 解决边距折叠

BFC (block formatting context) 块级格式化 文档

何为 BFC ,只要元素满足下面任一条件即可触发 BFC 特性:

  1. body 根元素 <html>
  2. 浮动元素:float 不为 none 的属性值
  3. 绝对定位:position: absolute 或 fixed
  4. display 为: inline-block、table-cells、flex 、grid
  5. overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 的布局规则:

  1. 内部的盒子会在垂直方向,一个个地放置;
  2. BFC 是页面上的一个隔离的独立容器;
  3. 属于同一个 BFC 的 两个相邻 Box 的 上下 margin 会发生重叠 ;
  4. 计算 BFC 的高度时,浮动元素也参与计算
  5. BFC 的区域不会与 float 重叠;

BFC 还可以干什么

  1. BFC 可以包含浮动的元素(清除浮动)

See the Pen clear-float by Mary (@maxxiaobao) on CodePen.

  1. 阻止元素被浮动元素覆盖

overflow: hidden 注释后,便可发现左侧的红盒子底下右侧 div 的灰色背景被覆盖。

See the Pen example2 by Mary (@maxxiaobao) on CodePen.


Written by MaryMa A front end developer who makes slow progress and never gives up.