CSS实现左右布局的N种方式

使用行内块布局，主要使用display:inline-block属性  

<div style="font-size:0;height:100%;">

    <div style="width:50%;height:100%;background-color: red;display: inline-block;"></div>

    <div style="width:50%;height:100%;background-color:blue;display: inline-block;"></div>

  </div>

使用浮动布局主要使用的是float属性的left和right的值

  <div style="height:100%;">

    <div style="width:50%;float: left;height: 100%;background-color: pink;"></div>

    <div style="width:50%;float: right;height: 100%;background-color: plum;"></div>

  </div>

使用弹性布局主要使用的是display:flex;和flex属性

  <div style="display: flex;height: 100%;">

    <div style="background-color: pink;flex: 1;"></div>

    <div style="background-color: plum;flex: 1;"></div>

  </div>

使用纯定位布局，即相对定位和绝对定位position:relative和position：absolute

  <div style="position: relative;height: 100%;">

    <div style="position:absolute;background-color: powderblue;top:0;bottom:0;left:0;width:50%;"></div>

    <div style="position:absolute;background: rebeccapurple;top:0;bottom:0;left:50%;width:50%;"></div>

  </div>

使用div+浮动布局利用的原理主要是普通文档流和脱离文档流的知识点

  <div style="height: 100%;">

    <div style="background-color:rosybrown ;width:50%;float: right;height: 100%;"></div>

    <div style="background: beige;width:50%;height: 100%;"></div>

  </div>

使用div+浮动布局利用的原理主要是普通文档流和脱离文档流的知识点，但是需要借助margin-left属性

  <div style="height: 100%;">

    <div style="background-color:chartreuse ;width:50%;float: left;height: 100%;margin-left: 50%;"></div>

    <div style="background: darkgray;width:50%;height: 100%;"></div>

  </div>

其实远不止这6种方法，只要掌握了盒子模型，弹性布局，普通文档流，脱离文档流及浮动等CSS特性，灵活布局将不再是难事，在此奉上以上的各种方法，希望可以帮助到您