两栏布局 简单了解 肯定是全网最简单介绍 看完就会

最简单 方案:

使用: float+margin

1 首先准备一个块级父元素 , 父元素中有两个子元素,分别作为左右两栏;

2 将左元素 设置浮动,  会使元素脱离文档流,右元素位置上移

3 防止右元素被左元素挡住,这时只需要给右元素加外边距 就行了  

简简单单的完成了 双栏布局 

使用 : float+BFC

1 准备一个块级父元素,父元素里面有两个元素,分别作为左右两栏

2 将左元素设置浮动,会使元素脱离文档流,右元素位置 上移

3 防止右元素被左元素挡住,需要给右元素外另一个父元素,并触发该父元素的BFC

使用: 定位 + margin

将父元素设置为相对定位,左元素设置绝对定位,右元素设置margin-left的值

使用  flex 浮动

父元素 设置 display:flex, 右元素设置 flex:1 即可