通过给左边块级元素设置向左浮动，使其脱离标准文档流，从而右边的块级元素能够从第二行“跑到“第一行，这里要注意的是，左边元素其实是覆盖在右边元素上的，所以这里要给右边元素设置坐外边距，该值的大小是左边元素的宽度。
三栏布局 这里的三栏布局实现有很多种方式。
—简单的利用浮动的方式
<div class="left">左栏</div> <div class="right">右栏</div> <div class="middle">中间栏</div> .left{ width: 100px;height: 300px; background: yellow; float: left; } .right{ width: 100px; height: 300px; background: green; float: right; } .middle{ height: 300px; background: red; margin:0 100px; }这里要注意的是html的结构，可以看到中间拦是在最后面的，在某些极端优化场景下，要求中间内容要首先被解析出来，这样子可能会有问题，后续再说。
–利用定位的方式
<div class="left">左栏</div> <div class="middle">中间栏</div> <div class="right">右栏</div> html,body{ margin:0; } .left{ width: 200px;height: 300px; background: yellow; position:absolute; top:0; left:0; } .right{ width: 200px; height: 300px; background: green; position:absolute; top:0; right:0; } .middle{ height: 300px; background: red; margin:0px 200px; }这样子的html结构是比较正常的，但是如果他们的父元素有内外边距，那么中间的部分可能不会和两端平齐，所以我给根元素设置了外边距为0。
—设置负值的margin 在上述第一个方法中提到，有时候我会希望中间主体内容先渲染出来，所以要把中间栏的dom放在最前面，那这时候要怎么去布局呢，可以这样来：
<div class='main'> <div class='middle'> <div class="content"> 中间栏 </div> </div> <div class="left">左栏</div> <div class="right">右栏</div> </div> .main{ overflow:hidden; } .content{ border:1px solid #555; margin:0 200px; } .left{ width: 200px;height: 300px; background: yellow; float:left; margin-left:-100%; word-break:break-all; } .right{ width: 200px; height: 300px; background: green; float:left; margin-left:-200px; } .middle{ height: 300px; background: red; float:left; width:100%; } .wrapper{ float:left; width:100%; }其实主要是利用了负值的margin，值得注意的是，在middle下还有一个content的子元素，并且设置了水平的margin，主要是为了让内容能够在中间显示，这也是所谓的“双飞翼“布局，不过这种做法多了一些标签，乍看之下有点复杂。还有一种类似的“圣杯“布局，大致想法是一样的，只不过在解决内容不被遮盖上，是利用了padding和相对定位来实现。
—利用flex布局 弹性盒子的话实现就很简单了
<div class='box'> <div class="left">左栏</div> <div class="middle">中间栏</div> <div class="right">右栏</div> </div> .box{ display:flex; } .left{ width: 200px;height: 300px; background: yellow; } .right{ width: 200px; height: 300px; background: green; } .middle{ height: 300px;width:100%; background: red; }除了兼容性问题以外，这个实现起来就好多了
