文: jack同学
jack同学
-
是什么：它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的一些布局规则
-
另外一些概念：
- 视觉格式化上下文包含了块级格式化上下文，所以BFC也是布局规则的一种，并且是常规流块盒布局规则的一部分。
- 所谓创建BFC的元素，也就是某个元素具有了一些布局规则
- BFC渲染区域：这个区域由某个HTML元素创建，下面的元素会在内部创建BFC
- 根元素，HTML元素会创建BFC，包含了页面所有元素
- 浮动和绝对定位元素
- overflow不等于visible的块盒
- 行块盒
-
解释为什么是独立的渲染区域？
- 各个BFC区域相互独立，渲染时互不干涉
-
具体规则：
- 创建BFC的元素，他的高度需要计算子元素是浮动的元素。（这一点可以解决浮动之后父元素高度塌陷的问题，让父元素创建bfc）
- 创建BFC的元素，他的边框盒不会与浮动元素重叠。（这一点可以布置两栏布局，左侧元素定宽浮动，右侧BFC元素自适应宽度）
- 创建BFC的元素，不会和子元素进行外边距合并（这一点可以解决父子元素margin塌陷问题，也是让父元素创建BFC）
网友评论