CSS（十八）——块级格式化上下文

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来解决。