在网上看了一下关于两栏布局的细节，发现都不是很完备，会有各种bug，这里自己抛砖引玉，总结一下
两栏布局的实现有很多方式，这里主要讲两种
1.浮动
<style>
.left{
height: 200px;
width: 200px;
float: left;
}
.right{
height: 200px;
overflow: hidden;
}
.bgGreen{
background-color: green;
}
.bgRed{
background-color: red;
}
</style>
<div class='container'>
<div class='left bgGreen'></div>
<div class='right bgRed'></div>
</div>
效果图大概是这样：
图片.png
这里采用了 overflow触发bfc实现的浮动清除，使用 clear:both也可以。
效果好像还挺不错，可是这里有一个潜在的bug
让我们在 left里面填充一些东西，就像这样
<div class='container'>
<div class='left bgGreen'>0123456789876543210123456789876543210</div>
<div class='right bgRed'></div>
</div>
图片.png
在 left区间里面，并没有发生想象中的换行行为，而是随着内容的增长，延伸到了区间外面。这是由于word-wrap属性默认为 normal，也就是只有在断字处换行。在平常我们搭页面的时候，由于block元素默认占一整行，而inline元素宽度默认跟随内容。也只需要设置 left区间 word-wrap: break-word即可
图片.png
2.绝对定位
.left{
position: absolute;
width: 200px;
height: 200px;
}
.right{
height: 200px;
margin-left: 200px;
}
.bgGreen{
background-color: green;
}
.bgRed{
background-color: red;
}
图片.png
和浮动一样，也会有超出区间不换行的bug情况出现，同样在 left区间上面设置 word-wrap: break-word即可
