如何实现两栏布局和三栏布局

内容来自b站视频笔记，原文链接

两栏布局可以分为两类

第一种：浮动+margin

html:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

css:

.left{
    width:300px;
    background-color:yellow;
    float:left;
}
.right{
    background-color:blue;
    margin-left:300px;
}

这样就实现了左列定宽，右列自适应布局

浮动+BFC

关于BFC

常见定位方案有普通流（元素先后位置，至上而下布局）、浮动（先按照普通流位置出现，然后根据浮动方向偏移）、绝对定位（元素整体脱离 普通流）
BFC属于普通流，元素拥有BFC时，该元素可以看做一个容器。容器里面元素不会影响到外面元素
触发BFC:

BFC的特性和作用
1.避免外边距重叠


2.清除浮动

3.阻止元素被浮动元素覆盖

操作

定位

或者

flex布局

display默认是行布局，里面的flex属性值为1的话，会有拉伸填充本行的作用

浮动+负外边距

这种比较复杂

table布局

这个很简单，先设置display:table-cell就可以平分两列，再加入宽度就可以实现左边固定宽度，右边自适应了

三栏布局

主要是左右两侧定宽，中间自适应这种方案

浮动+margin

浮动+BFC

这个更简单

flex

这个最好

另外附最常见的网页布局