FC(Formatting Context)格式化上下文—— 一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素之间的关系和相互作用。
IFC布局——行内格式化上下文
inline formatting context
触发IFC的方法
块容器盒内不包括任何块级盒,即块容器盒(html行内块级标签或块级标签)内全是行内盒(html内联标签)
IFC布局的特点
- 行内盒水平排列为一行,当容器宽度不够时就会换行
- 每一行都会生成一个行盒(见触发IFC的方法中的配图),内部包括该行所有的盒子
- 行盒的宽度由包含块和存在的浮动来决定
- 行盒的高度由内部元素中实际高度最高的元素计算出来
- 水平方向上行内盒的外边距、边框、内边距所占用的空间都会被计算,但垂直的border,padding 与 margin 都不会撑开行盒的高度
- 水平方向的对齐通过 text-align 来设置,默认对齐为left 左对齐(当所有盒的总宽度小于行盒的宽度时)
- 垂直方向的对齐通过 vertical-align 来设置,默认对齐为 baseline 基线对齐(当最高的行内盒的高度小于行盒的高度时)
- 当所有盒的总宽度超过一个行盒时,就会形成多个行盒,多个行盒相互之间垂直方向不能分离,不能重叠
- 行盒一般左右边都贴紧其包含块,但是会因为浮动盒(float 元素)的存在而发生变化。浮动盒会位于包含块边缘与行盒边缘之间,这样行盒的可用宽度就小于包含块的宽度
- 当一个行内盒超过行盒的宽度时,它会被分割成多个盒,这些盒被分布在多个行盒里。如果一个行内盒不能被分割(比如只包含单个字符,或word-breaking机制被禁用,或该行内框受white-space属性值为nowrap或pre的影响),那么这个行内盒将溢出这个行盒
BFC布局——块级格式化上下文
block formatting context
形成一块独立的渲染区域,内部元素的渲染不会影响外部元素,也不会被外部元素影响
触发BFC的方法
满足以下任意一个条件即可
- html根元素;
- float的值不为 none;
- overflow的值不为 visible (即值为auto / scroll / hidden【推荐】)
- display的值为 flex / inline-block / table-cell / table-caption
- position的值为 absolute / fixed
BFC布局的特点
- 不会发生margin重叠
- 可以清除浮动
- 实现更健壮、更智能的自适应布局
应用范例
清除浮动
<div class="container bfc">
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" class="left" style="magin-right: 10px;"/>
<p class="bfc">某一段文字……</p>
</div>
.container {
background-color: #f1f1f1;
}
.left {
float: left;
}
.bfc {
overflow: hidden; /* 触发元素 BFC */
}