BFC总结



//一篇优秀的博文推荐
https://zhuanlan.zhihu.com/p/25321647

css中的常见布局

普通流布局
在普通流中，元素按照在HTML中的先后位置依次布局。

浮动布局
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向偏移。

绝对定位布局
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何的盒模型都可以指定为flex布局。



BFC



BFC（Block Formatting Contexts）即块级格式化上下文。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

触发BFC
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC特性
1 同一个 BFC 下外边距会发生折叠
2 BFC 可以包含浮动的元素（清除浮动）
3 BFC 可以阻止元素被浮动元素覆盖