这是我参与「第五届青训营 」笔记创作活动的第2天 主要介绍了css几种布局区别，便于从上到下重新梳理布局方式，为什么要清除浮动等问题

布局分为

• 常规流
• 浮动
• 绝对定位

常规流(文档流)排版问题

所有文档流中的盒子，必定在其中一种排版上下文中

css块级行级元素问题

1. 块级元素：块级元素不可用width和height

行级排版上下文IFC

如果一个块级元素div中只包含行级元素，则生成行级排版上下文
如div元素虽然是块级元素，只包含行级元素p/span时，生成行级排版上下文

块级排版上下文

以下几种情况创建BFC

• 根元素
• 浮动、绝对定位、inline-block
• flex和grid等

BFC排版规则：

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

块级和行级只能实现从上到下，或从左到右

flex box

新的排版上下文 特性：可以控制子级盒子的

• 摆放流向
• 摆放顺序
• 盒子宽度和高度
• 水平和垂直方向对齐
• 是否允许折行

flex有两种主轴，横向和纵向 对齐方式： flex可以解决弹性，当子元素有剩余空间时，会伸展，空间不够时，会收缩

grid布局

定义：display 属性设置为 grid或者 inline-grid

• 首先网格设置，分别设置列的数量和高度

` grid-template-columns 和 grid-template-rows

`

• 元素排布 通过设置每一个子项占那些行列进行布局

浮动

目的：实现图文环绕，如四周型图片

浮动布局的破坏性：

在于浮动元素不占据页面的文档流，脱离了会脱离当前所在的文档流，不占用文档空间，会导致元素重叠 清除浮动方法没有讲，因为现在用的很少了，多用flex布局 我简单回顾一下

• 设置clear:both：使用伪元素.clear::before,.clear::after{ clear:both }
• 采用BFC，使得父元素形成独立的空间——创建bfcoverflow:hidden
• 给父元素增加高度

绝对定位-position

总结：

1. 常规流中行级排版上下文IFC，一行为一个，行内进行设置
2. 常规流中块级排版上下文，纵向排列
3. flex布局，弹性布局，可以设置横向纵向，排列方向
4. grid布局：二维布局，网格布局
5. 浮动布局：为了实现图文环绕效果
6. 绝对定位布局