CSS中的BFC详解
2024-01-17 16:16:22
浏览：43
评论：0
BFC是什么
区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
- BFC通常与块级元素相关联，内联元素默认情况下不会创建BFC。因为块级元素在布局中具有更明确的行为和特性。
- BFC是一个独立的渲染区域，内部元素和外部元素相互不影响。
- BFC的触发，通常是为了实现某些布局和解决样式问题。
如何触发BFC
- 文档的根元素（
<html>）。 - float值非none
- overflow值非visible
- display值为inline-block、table-cell、table-caption、flex、inline-flex
- position值为absolute、fixed
BFC特性
- 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
- 计算BFC高度时浮动元素也参于计算（重点）
- BFC的区域不会与浮动容器发生重叠（重点）
- BFC内的容器在垂直方向依次排列
- 元素的margin-left与其包含块的border-left相接触
- BFC是独立容器，容器内部元素不会影响容器外部元素
触发BFC解决了哪些问题
- 可以清除浮动：（塌陷问题）
- 解决垂直边距重叠：
- 可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）