CSS(十八)——块级格式化上下文
前言
本笔记的内容较为重要,内容不多,但理解起来有些难度。同样在笔记的总结里会对核心概念进行总结和解释。各位同学开这篇笔记可能会多费神一些。
另,如果还是不懂可以私信我。我会尽量为大家说明。
概述
块级格式化上下文,全称Block Formattion Context,简称:BFC。它是一块独立的渲染区域,规定了在该区域中,常规流块盒的布局。
常规流块盒:
- 水平方向上撑满包含块;
- 垂直方向上依次摆放;
- 外边距相邻会合并;
- 高度、位置自动时,无视浮动元素;
独立的渲染区域(BFC渲染区域):这个区域由某个HTML元素创建,以下元素会在其内部创建BFC区域:
- 根元素;
- 浮动和绝对定位元素;
- overflow不等于visible(默认值)的块盒。
独立的渲染区域表示:不同的BFC区域在进行渲染时互不干扰。即:对内部的渲染不会影响到外部。
BFC 具体规则
-
创建BFC的元素,他的自动高度需要计算浮动元素;
-
创建BFC的元素,他的边框不会与浮动元素重叠;
-
创建BFC的元素,不会和它的子元素外边距合并。
总结
-
一般来说,当父元素为常规流的时候,如果内部所有元素为浮动元素,则会产生高度坍塌。之前的解决办法是使用**.clearfix的方式清除浮动,解决高度坍塌问题。而BFC元素可以自动改计算浮动元素,所以我们可以尝试将父元素定位为浮动、定位或者将overflow设置为hidden。但是这种方式有弊端,使用BFC的方式很可能会改变原本的页面布局或者与期望的页面布局不符,所以我们最好还是选择使用清除浮动**的方式来解决高度坍塌的问题。
-
可以尝试使用BFC元素会避开常规流元素的特性,设计出侧边来永远固定,而正文位置会随浏览器而改变的样式。
-
具体提规则的第三条中也可以换一种说法:不在同一个BFC区域内的元素不会发生外边距合并。因为:不同的BFC区域在进行渲染时互不干扰。也就是说,在HTML中的简历的BFC元素的外边距是属于自己的,其内部元素的外边距无法影响到父元素中已经被渲染的样式。
-
定位依旧会造成高度坍塌,无法依靠BFC来解决。