BFC布局

目录

什么是BFC？

怎么触发BFC？

触发条件

普通文档流布局规则(bug)

BFC布局规则

---

什么是BFC？

只有块元素参与的；

　　BFC 的全称为：块元素格式化上下文（Block Formatting Context），触发BFC的元素会独立出来一个渲染区域，让处于BFC内部的元素与外部的元素相隔离，使内外元素不会相互影响。

简单来说：BFC能影响盒模型的渲染规范;

简单来说: BFC就是形成一个独立的盒子，并且这个盒子里的布局不受外部影响，也不会影响到外部布局;

---

怎么触发BFC？

情况一、如果是父子关系元素，触发条件添加给父元素。

情况二、如果是兄弟关系元素，触发条件添加第二个元素(弟弟元素)。

触发条件

• 　　浮动元素 float属性为 left/right
• 　　定位元素 position属性为 absolute 和 fixed

• 　　display为inline-block, table-cell, table-caption, flex, inline-flex,

• display:flow-root;  转换为根元素, 最好不用此方法，一个页面里只能有一个根元素。（display：flow-root，对上下margin重叠无效）

• 　　overflow：hidden；  (herit继承,父元素也不能为visible; 为auto或scroll会显示滚动条,最好是hidden)

---

普通文档流布局规则(bug)

1.浮动的元素是不会被父级计算高度(父子关系元素)   高度塌陷

2.当子元素与父元素都没有添加float属性的情况下，给第一个子级添加margin-top会传递给父级（父子级关系元素）   外边距塌陷(父子关系)

3.非浮动元素会覆盖浮动元素原有的位置（兄弟关系的元素）。  圣杯布局

4.两个相邻元素上下margin不相加(兄弟关系的元素)   外边距合并问题,取较大的margin值 (兄弟关系)

---

BFC布局规则

1. 浮动的元素会被父级计算高度（父级添加overflow:hidden触发了BFC）

2. 当添加BFC触发条件后，margin-top不会传递给父级（父级触发了BFC）    (也可以给父元素一个外边框;或上内边距,但是padding也影响下面的布局)

3. 非浮动元素不会覆盖浮动元素原有位置（非浮动元素加overflow：hidden 触发了BFC）

4. 两个相邻元素上下margin会相加（给其中一个元素增加一个父级，然后给他的父级添加overflow：hidden 触发BFC 或 给第二个子元素添加display：inline-block 或 只设置只给一个元素设置margin）。