CSS排版上下文

BFC块排版上下文

BFC是一个独立的容器，容器内的子元素不会影响容器外的元素，同理容器外也不会影响容器内元素

# 规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。同属一个BFC的相邻块级盒子的垂直margin会发生合并（Collapse）
每个元素盒子的左外边缘（即Margin box的左边）和包含块的左边缘（即Border box的左边）相接触（对于从右往左的排版则相反，是右边接触)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

# 形成方式

根元素，即html标签元素（有些浏览器下是body标签元素）
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible 注意：display: block不是块排版

# 例子1 子元素形成BFC

<div class="content">
  <div class="left">left</div>
  <div class="right">rightrightrightright</div>
</div>

1
2
3
4

默认情况div为block会依次排列。

图1. 默认情况，left不加float

给left元素加上float: left后随即形成BFC，content元素高度塌陷，高度由right元素撑起

图2. left加float

给right元素加上overflow: hidden;

图3. right加overflow

如果将right元素加上float: right;，content所有元素都是float，高度塌陷为0。

图4. right加float

代码详情见示例1

# 例子2 父元素BFS

<div class="content">
  <div class="left">left</div>
  <div class="right">rightrightrightright</div>
</div>
<div class="other">other</div>

1
2
3
4
5

给left元素加上float: left后随即形成BFC，content元素高度塌陷，高度由right元素撑起，但同时也影响力other元素的内容。

图5. left加float脱离文档流，影响父级

给content元素加上任一BFC标志形成BFC，随即content就不会影响other元素

图5. content设置BFC，不影响容器外部元素

代码详情见示例2

IFC内联排版上下文

# 规则

内部的Boxes会在水平方向，一个接一个地放置。
这些Boxes垂直方向的起点从包含块盒子的顶部开始。
摆放这些Boxes的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。
在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。
IFC中的line box一般左右边都贴紧其包含块，但是会因为float元素的存在发生变化。float元素会位于IFC与与line box之间，使得line box宽度缩短。
IFC中的line box高度由CSS行高计算规则来确定，同个IFC下的多个line box高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）。
当inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由‘text-align’属性来确定，如果取值为‘justify’，那么浏览器会对inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。
当一个inline box超过line box的宽度时，它会被分割成多个boxes，这些boxes被分布在多个line box里。如果一个inline box不能被分割（比如只包含单个字符，或word-breaking机制被禁用，或该行内框受white-space属性值为nowrap或pre的影响），那么这个inline box将溢出这个line box。

# 形成

块级元素包含内联元素即可形成IFC，通常来讲就是div包含文本（em、span等）

# 示例

只要是带block的标签包含inline就可以形成IFC，不是绝对的div或p标签。 block可以通过text-align设置所有内联元素的左右对齐方式，内联元素也可以通过vertical-align设置在内联块中的上下对齐方式。

<span>
  Several 
  <em>emphasized words</em> 
  appear
  <span>in this</span>  
  <p>sentence, dear.</p> 
</span>

1
2
3
4
5
6
7

span {
  display: block;
  width: 200px;
  height: 300px;
  background: #999999;
  text-align: center;
}
p {  
  vertical-align: bottom;
  display: inline-block;
}

1
2
3
4
5
6
7
8
9
10
11

Grid布局

Flex布局

上次更新: 2025/09/05, 8:09:00

← CSS绘制三角形 CSS伪类→