基础//页面布局总结

1 方案

不管三栏布局、还是两栏布局，
只要左右布局的方式，多 float，（float、absolute、flex、table、grid）；
上下布局的方式，没有 float，（absolute、flex、table、grid）。

2 各方案有什么优缺点？

1）浮动 float
优：简单
缺：脱离文档流，需结合BFC应用
注意：需把浮动的块级写在前面！！！float在左右布局中才有用

diaplay: left/right

2）绝对定位 absolute
优：简单
缺：脱离文档流，需结合BFC应用，代码较多

父 position: relative;
子 position: absolute;

3）flex 布局
优：简单快捷，兼容性好，解决浮动和绝对定位的缺点

父 diaplay: flex;
子 flex: 1; //=flex: 1 1 0;

4）table 布局
优：兼容性较好
缺：每一列高度会同时变化；表格需先渲染，延迟页面生成速度
注意：设置为“display：table”的块级需要设置width：100%

父 display: talble;
子 display: table-cell;

5）grid 布局
优：可实现多行多列的二维复杂操作，兼容性较好，简化代码

父
display: grid;
grid-template-rows: 100px;
grid-template-columns: 10px 20px auto;

3 题中某些条件去掉后，哪些方案还能用？哪些不能了？

以 ‘三栏布局：已知高度为100px，左右宽度固定，中间自适应’ 为例，
若去掉“高度固定”的条件，增加中间栏输入的内容，哪些还能用而哪些不能用？
-float不能用，中间的内容太多会往左栏挤
-absolute不能用，中间内容会往下往外挤
-flex可以用，左右两栏会跟着中间栏适应撑开
-table布局可以用，左右中间都会自动撑开
-grid布局不能用，高度没有撑开

4 哪个方案的兼容性最好？

flex 布局、grid 布局