前言
说起BFC,一些不熟悉的童鞋往往会有两种情况:1. 用了BFC但是不知道有这回事,2.请教过大佬听过BFC大名然后CV了一段overflow: hidden解决了问题然后不刨根问底,笔者曾经也是其中的一员。思维不清晰肿么办?问谷歌娘呗~看了好多文章,知道自己没有过目不忘的本事,还是觉得要自己动手写写,一来加深印象,二来方便日后追溯,故撰此文。
什么是BFC?
w3c是这么解释的:
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的
块级格式化上下文
(block formatting context)。
请注意,BFC并不是一个css属性,也不是一段代码,而是css中基于box的一个布局对象和单位,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。明确地,它是一个独立的盒子,并且这个独立的盒子内部布局不受外界影响,当然,BFC也不会影响到外面的元素。
成为BFC的条件
其实在w3c规范中已经简单罗列了称为BFC的基本条件,但我们还是详细说明下,保持记忆脉络清晰。
一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个:
float
的值不为