常见css布局实现

bfc

是什么？
bfc是一种规则，

特点：
bfc内部的元素会垂直排列，
float元素不会重叠，
并且float元素参与计算高度；

形成的条件包括?
float：left/right,
overflow:hidden,auto等但是不能是visible，
postion: absolute,fixed
display: flex

解决问题：
清除浮动。
外边距合并问题。

常用手段：
经常使用overflow: hidden; 

不使用float或者position,因为解决浮动问题的同时，会使得元素脱离文档流出现盒子重叠的问题。

两栏布局 左固定，右自适应

常用方法：
1.左边定宽+float:left，右边auto宽度+margin-left左边的定宽
2.左边定宽+float，右边overflow:hidden(利用BFC，浮动元素和BFC能共处一行)
3.左边只设置定宽，右边只设置flex:1 (csdn就是利用这个配置的）
4.父级相对relative左边postion：absolute+left：0+定宽，右边宽度auto+position：absolute+left：20

圣杯布局

外层容器{
    padding: 左边距;
    padding: 右边距;
}
中间 {
    width: 100%;
    height: npx;
    ...
}
左边 {
    position:relative; //回到与中间容器 同一行
    margin-left: -100%; // 回到中间容器左侧
    right: -左边距; //对齐左侧开头
    ...
}
右边 {
    position: relative: // 回到与中间容器 同一行
    right: -右边距;
    margin-right: -右边距;
    ...
}