inline Formatting Context

特点

内部的盒子会在水平方向，一个个地放置
IFC 的高度，由里面最高盒子的高度决定
当一行不够放置的时候会自动切换到下一行
水平 margins, borders, 和 padding 平分

宽度由浮动情况和它的包含块决定

包裹性

首选最小宽度

外部容器宽度为 0，宽度由最小宽度决定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首选最小宽度</title>
    <style>
      .min {
        width: 0;
        display: inline-block;
      }
      .min::before {
        outline: 1px solid #000;
        content: "我a我";
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="min"></div>
  </body>
</html>

定义

元素最适合的最小宽度
东亚文字最小宽度为每个汉字的宽度
西方文字一般会终止于空格、短横线、问号以及其它非英文字符

最大宽度

高度由 line-height 的计算结果决定

详述

内容区域
- 文本选中区域
- 图片混排、垂直padding不是
内联盒子
- 决定是否一行显示
- 匿名内联盒子
行框盒子

多个内联盒子组成每行
包含盒子

最外边包含块

CSS系列 - IFC

特点

详述