两列/三列布局 负margin flex

一：两列布局实现

如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
3种方案。1：float，2：position，3：BFC

第3种 BFC（另一篇博客：https://blog.csdn.net/weixin_43322208/article/details/90452839 ）

初始设置leftBox左浮动以后，是下面的结果。（因为现在两个box都处在同一个BFC中，根据BFC规则第三条，每个元素的margin box的左边， 与包含块border box的左边相接触，即使存在浮动也是如此，所以他们都是以BFC边界为起点。）

如果我们给右边的rightBox加上overflow: hidden。根据BFC第四条规则：BFC的区域不会与float box重叠。当右边变为一个新的BFC时，这两个块就不会重叠了，由此实现自适应。

二：三列布局实现

两侧宽度固定，中间宽度自适应的三栏布局

5种方案
https://www.cnblogs.com/honoka/p/5161836.html
1.浮动 2.BFC 3.圣杯 4.双飞翼 5.flex

浮动及清除浮动的几种方式：https://www.cnblogs.com/xiaoqiang001/p/3908257.html

第1种float：
画完以后是这样子的：

对比了样式没有任何问题啊。。。后来发现原来还得注意一点，html结构上要把left和right放到center的前面 。我们都知道元素有两种：块级元素（如div、p、h、列表、table、form、body）和内联元素（如span、a、img、input）。块级元素默认占据一行出现；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
浮动就是个带有方位的display:inline-block属性，而inline-block是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。 如果布局上现有centerBox再有rightBox，那么centerBox占据一行，rightBox自然就被挤下去了。

（这里还有一个问题是，centerBox即使不设左右margin依然可以达到效果，那么margin在这里还有啥用呢？？？）

圣杯和双飞翼：（下面这个链接介绍的很清楚,这篇文章真的非常好）
https://www.jianshu.com/p/81ef7e7094e8 （不能忽略中间块的width：100%）
注意两者都是先渲染中间的部分，否则会错乱

圣杯：

一定要设定最小宽度，不然很窄的时候会很丑。最小宽度 left+left+right（第二个left是relative在center上原本占用的宽度）

html结构：allBox设置左右内边距，其内部容纳 center，left，right。center结构在前，其宽度100%，将left和right挤到第二行。

 

left是如何上位？https://segmentfault.com/a/1190000014546205?utm_source=tag-newest（下面这张图很清楚）