块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
BFC的作用以及如何创建一个BFC
创建一个BFC
- 设置diplay为:inlin-block;
table、table-row
、table-row-group、
table-header-group、
table-footer-group
、table-caption、flex、grid 、flow-root、 - 设置float 不包括none值
- 设置position为absolute、fixed
- 设置overflow不为visible
- 根元素(
<html>)
常见用途:
1.magin重叠问题
同一个BFC中的两个元素的margin会重叠
解决办法:创建一个BFC包围元素 如 display:inline; overflow:hidden; dispaly:flow-root
2.清除浮动
子元素浮动,父元素设置为BFC如overflow:hidden;dispaly:flow-root
3.自适应两栏布局
BFC元素不会与浮动元素重叠
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。