BFC总结
//一篇优秀的博文推荐
https://zhuanlan.zhihu.com/p/25321647
css中的常见布局
在普通流中,元素按照在HTML中的先后位置依次布局。
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向偏移。
在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体的位置由绝对定位的坐标决定。
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何的盒模型都可以指定为flex布局。
BFC
BFC(Block Formatting Contexts)即块级格式化上下文。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
body 根元素
浮动元素:float 除 none 以外的值
绝对定位元素:position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
1 同一个 BFC 下外边距会发生折叠
2 BFC 可以包含浮动的元素(清除浮动)
3 BFC 可以阻止元素被浮动元素覆盖