css BFC

BFC

• Block Formatting Context
• 页面上一个独立的容器，容器内的子元素不会影响到外面的元素
• 在一个BFC中，两个元素的上下margin会重叠

如何创建一个BFC

• 元素浮动
• 绝对定位（absolute或者fixed）
• display:flex;
• display:inline-block;
• overflow 除了visible

BFC的作用

• 解决外边距重叠问题
• 制作左右两栏布局，左边宽度固定，右边宽度自适应。BFC区域不会和浮动的元素重叠。
• 清除浮动造成的父元素高度塌陷。给父元素开启BFC就行了，浮动子元素也要参与计算。

参考文章

https://blog.csdn.net/weixin_43974265/article/details/115416184