页面两栏布局

页面两栏布局分为下面几种情况：

1⃣️左侧float:left,右侧margin-left

注意：块级元素具有流动特性，即默认会填充外部容器，所以只需要margin，不需要设置width就可以让content填满剩余的部分

2⃣️左侧float:left右侧overflow:hidden

.left{

float: left

width: 200px

height: 200px

}

.right{

overflow: hidden

height: 200px

}

.left{

width: 200px

}

.right{

position: absolute

left: 200px

right: 0

top: 0

}

4⃣️利用d性布局

左侧的宽度会随着内容的大小而缩放

1⃣️左侧float:left右侧overflow:hidden

2⃣️利用d性布局

利用flex

1、左边width:200px右边width:calc(100%-200px)；

2、flex布局：父元素使用display:flex；子固定元素设置min-width即可

3、grid布局：父元素 display:gridgrid-template-columns: 60px 300px auto

4、左元素浮动（BFC）

1）右侧元素添加margin-left，值为左侧元素宽度

2）右侧元素触发BFC（overflow:hidden/auto/scroll、绝对/固定定位、float、flex、grid等等）

3）右侧元素设置padding-left，并添加子元素作为新的右侧元素

5.左侧元素定位（BFC），右侧元素margin-left

6.左元素（BFC）：display:table-cellwidth:60px右侧元素随内容变化宽度

---