zuoxiaobai#zuo11.com#web前端BFC，什么是BFC1

--- { "title": "web前端BFC，什么是BFC", "staticFileName": "web_bfc.html", "author": "guoqzuo", "createDate": "2020/07/12", "description": "虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下。BFC是 Block Formatting Context 的缩写，字面意思是 块格式化上下文。 字面意思很难理解，我们先来看几个例子", "keywords": "web BFC,前端BFC,css BFC,什么是BFC", "category": "CSS" } --- # web前端BFC，什么是BFC 虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下 ## BFC相关示例 BFC是 **Block Formatting Context** 的缩写，字面意思是 **块格式化上下文** 字面意思很难理解，我们先来看几个例子 ### 1. margin塌陷问题 下面的例子中A、B两个元素的margin都为10px，理论上A、B上下间的距离为 20px，但实际却是 10px ```html ``` 利用BFC解决塌陷的问题，用父元素包裹并设置overflow为hidden，这样间隔就是20px了 ```html ``` ### 2. float父级元素高度为0的问题 wrapper的子元素使用了float，其高度为100px，但他的父级元素wrapper高度为0 ```html ``` 解决方案如下,给wrapper添加一个BFC属性，这时wrapper的高度就是子元素�