CSS布局方案｜青训营笔记布局相关布局无疑是我们前端人员必须要弄明白的布局分为，标准流(行级、块级、表格、flex

这是我参与「第四届青训营」笔记创作活动的的第1天

布局相关

布局就是依据元素、容器、兄弟节点和内容等信息来确定内容的大小和位置的算法，

布局无疑是我们前端人员必须要弄明白的

布局分为，标准流，浮动和定位

标准流：

行级，块级，表格布局，Flex布局 Grid布局

根元素、浮动和绝对定位的元素会脱离标准流

行级排版上下文

顾名思义就是行内元素的集合，与其他行级元素并行

lnline Formatting Context (IFC)

只包含行级盒子的容器会创建一个IFC。

IFC 内的排版规则

盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动(float)元素

块级排版上下文

单独成一行，

Block Formatting Context (BFC)

页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签

某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项(display:flex|grid)
overflow值不是 visible 的块盒
display: flow-root;

BFC内的排版规则

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

BFC的作用

解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题
解决子级元素外边距会使父级元素塌陷的问题

推荐阅读juejin.cn/post/711708… 讲解了深入理解BFC以及BFC的作用

Flex 排版上下文

它可以控制子级盒子的:

摆放的流向(→t ! )-摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

主轴：justify-content

侧轴：align-item

单独出文章详解其属性，在该布局文章中，不造作赘述

Grid排版上下文

学习之后会单独出一篇文章记录

浮动

知道左浮右浮

并且会处理浮动造成的影响（导致父盒子无高度）

清除浮动（本质上都是触发BFC）

额外标签法也称作是隔墙法，是W3C推荐的做法

会在浮动元素的末尾添加一个空的标签。例如div style='clear:both'></div> ,或者其他标签(如<br/>等)。 这个新增的元素必须是块级元素，不能是行内元素

父级添加overflow属性

给父级元素添加overflow :hidden; 或者overflow:auto; 或者overflow:scroll

父级添加after:伪元素

 .clearfix:after {
     content:"";
     display:block;
     height:0;
     clear:both;
     visbility:hidden;
 }

父级添加双伪元素

 .clearfix:before,.clearfix:after {
     content:"",
     display:table;
 }
 .clearfix:after {
     clear:both;
 }
 .clearfix {
     *zoom:1;
 }

定位

我们在布局中经常用到的方法

比较无脑的方法就是使用子绝父相，如果全局使用的话就会出现不适配问题

CSS布局方案｜ 青训营笔记