本文共 711 字，大约阅读时间需要 2 分钟。

解决边距重叠问题/清除浮动

• (1)基本概念：块级格式化上下文（并列ifc为内联格式化上下文）

• (2)原理（渲染规则）：

  ①在同一个bfc，相邻box垂直方向的边距会发生重叠

  ②bfc的区域不会和浮动元素的box重叠
  ③计算bfc高度时，浮动元素参与计算，清除内部浮动，使盒子重新具有高度。
  ④bfc页面是一个独立的元素，外面和里面的元素互不影响

• (3)如何创建bfc

  ①overflow:hidden;（overflow不为visible）

  ②float不为none;
  ③position不为static或者relative
  ④display为inline-block, table-cell, table-caption, flex, inline-flex

• (4)bfc使用场景

  ①自适应的两栏布局，BFC 可以阻止元素被浮动元素覆盖，符合（2）第2条

  ②清除内部浮动，当子元素均浮动时，其无法撑开父元素，这是可以让父元素生成BFC，符合（2）第3条
  ③防止margin重叠，在发生margin的元素外包裹一个bfc父元素，符合（2）第1条
  ④以上的几个例子符合（2）第4条：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
• 同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

转载地址：http://efaen.baihongyu.com/