理解BFC

一 、常见的定位方案

1. 普通流。
   我们平常没有经过浮动和定位就是普通流。
   普通流表现为至上而下，一个个排列下去。
2. 浮动
   元素设置为浮动后，无论是什么元素，都自动设置为块级元素.
   在浮动之前的位置尽可能向浮动方向移动，脱离文档流

3. 绝对定位。绝对定位也是脱离文档，不会对其他的兄弟元素造成影响

二、 关于BFC

1. BFC，块级格式化上下文。

   • BFC  的元素排列属于普通流
   • BFC就像一个大盒子一样装着一堆东西，这堆东西无论怎么变化，都不会影响到盒子外面的东西。

2. 如何触发BFC

   • body元素本身就是BFC，构建时自动帮我们触发了
   • float 不为none时触发BFC
   • position 的绝对定位，absolute,fixed
   • inline-block table-cells flex
   • overflow 值不为 visible 时

3. BFC特性

   • 同一个BFC下的元素外边距会重叠（合并）
   • 触发BFC 包含浮动元素。（一般情况下，对子元素都设置了浮动后，父元素就没有可以撑起的高度了。表现为有宽无高）
   • BFC 可以阻止块级元素被浮动元素覆盖。

原文地址：https://www.cnblogs.com/tail33/p/8313162.html