一文弄懂BFC格式化上下文还有浮动/清除浮动
date
Sep 19, 2023
slug
CSS_BFC_floating
status
Published
tags
前端
frontend
CSS
summary
BFC是常见的css概念，也是高频面试题，需要重点理解。他在清除浮动中的应用也要牢记。
type
Post
BFC 格式化上下文
BFC就是布局规则，平行的概念比如flex布局，BFC应该是默认的布局规则。
触发条件
满足下列条件就可触发BFC
1、 根元素，即HTML元素
2、 float的值不为 none
3、 overflow不为visible
4、 display为inline-block，table-cell，table- caption
5、 position的值为absolute或fixed
布局规则
- 内部box在垂直方向一个接一个放置
- box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
- 每个元素的margin box的左边，与包含块border box的左边相接触。即使存在浮动也是如此。
- BFC区域不会与float box重叠
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算BFC高度时，浮动元素也参与计算
浮动 & 清除浮动
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素（内联元素）会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
- 父级div定义height
- 最后一个浮动元素后加空div标签 并添加样式clear:both。
- 包含浮动元素的父标签添加样式overflow为hidden或auto。
- 父级div定义zoom