持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

1. css布局概述

• 布局（Layout)是什么？
  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算
    

2. 布局相关技术

• 常规流
  • 行级
  • 块级
  • 表格布局
  • Flexbox
  • Grid布局
• 浮动
• 绝对定位

2.1 常规流 Normal Flow

• 根元素、浮动和绝对定位的元素会脱离常规流
• 其它元素都在常规流之内（in-flow)
• 文档流或流：元素按照某种流向去摆放
• 常规流中的盒子，在某种排版上下文中参与布局，不同的排版上下文有不同的规则
  • 行级排版上下文：水平摆放，一行摆不下就换行
  • 块级排版上下文：上下摆放
  • Table 排版上下文
  • Flex 排版上下文
  • Grid 排版上下文

2.1.1 行级排版上下文

• Inline Formatting Context (IFC)
• 只包含行级盒子的容器会创建一个IFC
• IFC内的排版规则
  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动（float)元素＊

<div>
  This is a paragraphof text with long word Honorificabilitudinitatibus.Here is an image
  <img src="https://p4.ssl.qhimg.com/t01364272cf34a8f4d1.png"
alt="cat">
  And <em>Inline Block</em>
</div>

<style>
  div{
  width: 10em;
  font-size: 20px;
  //overflow-wrap:break-word;
  background: #fcc;
  }
  em {
    display:inline-block;
    width: 3em;
    background: #99f;
    }
  </style>

2.1.2 块级排版上下文

• Block Formatting Context (BFC)
• 某些容器会创建一个BFC
• 根元素
• 浮动、绝对定位、inline-block
• Flex子项和Grid子项
• overflow 值不是 visible的块盒

2.1.2.1 BFC内的排版规则

• 盒子从上到下摆放
• 垂直 margin 合并
• BFC内盒子的margin不会与外面的合并
• BFC不会和浮动元素重叠

<span>
  This is a text and
  <div> block </div>
and other text.
</span>
<style>
  span{
    line-height: 3;
    border: 2px solid red;
    background:coral;
}
div {
  line-height: 1.5;
  background:lime;
  }
</style>

分析：在流内，一个盒子内的子级盒子只能都是块级或者行级，如果是块级，从上到下摆放即可，如果是行级，会生成一个行级上下文。如果一个盒子里面既有行级又有块级，浏览器会产生几个匿名的块级盒子分开摆放元素。