BFC 布局规则以及触发条件

BFC,块格式化上下文,是一个独立的渲染区域,决定了块级元素如何对它的内部进行布局,以及与其他元素的关系

解释

块级元素:父级(块元素)
内容:子元素(块元素)
其它元素:与内容元素同级别
相互作用:BFC的内部元素与其他元素毫不相干

触发条件

触发BFC的方式:

  1. float 值不为 none;
  2. overflow 的值不为 visible;
  3. position 的值 不为 static 或者 relative 中的任何一个;
  4. display 的值为 table-cell, table-caption, inline-block;

BFC规则

  1. 内部的Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。你要避免相邻块元素外边距重叠的话,那你就要避免产生BFC。
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算

区别

BFC 普通文档流
浮动的元素被父级计算高度(父级触发BFC) 浮动的元素不会被父级计算高度
非浮动元素不覆盖浮动元素的位置(非浮动元素触发 BFC) 非浮动元素会覆盖浮动元素的位置
margin 不会传递给父级(父级触发了BFC) margin 会传递给父级
两个相邻元素的上下 margin 不会重叠 两个相邻元素的上下 margin 会重叠

BFC应用

  • 清除浮动
  • 防止 margin 重叠
  • 多栏布局的一种方式

你可能感兴趣的:(css)