ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[toc] ## BFC行为表现 如果一个元素具有BFC,内部子元素再怎么翻江倒海、翻云覆雨,都不会影响外部的元素。 所以,BFC元素是不可能发生margin重叠的,因为margin重叠是会影响外面的元素的; BFC也可以用来清楚浮动的影响,因为如果不清楚,子元素浮动则父元素高度塌陷,必然会影响后面元素布局和定位,这显然有违BFC的子元素不会影响外部元素的设定。 ## html文档元素也触发了BFC ![](https://box.kancloud.cn/9f2b650e32c28e87c0018fc73f33035a_665x264.png) 可以发现上图中body虽然浮动了,但html依然被撑开了(参见BFC约束规则5) 为什么html会触发BFC,参见原文这一段 >Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (**except when that value has been propagated to the viewport**) establish new block formatting contexts for their contents. ## 触发BFC从而清楚浮动具有穿透性 这是什么意思呢? 我们从上面知道了html会触发BFC,如果我们在body里有一个具有高度的元素,这元素被浮动 ,那么,此时html的高度是怎样的呢? html高度并不会0,浮动元素的高度会透过body传给触发了BFC的html 这并不是html本身的特殊性,而是所有触发了BFC的元素都会具有这种特性 ## 常用声明 ![](https://box.kancloud.cn/9c09c98ba189a7d2829499c0d5d51c39_538x300.png)