在網(wǎng)上看了一下關(guān)于兩欄布局的細(xì)節(jié)松捉，發(fā)現(xiàn)都不是很完備，會(huì)有各種bug馆里，這里自己拋磚引玉隘世，總結(jié)一下
兩欄布局的實(shí)現(xiàn)有很多方式，這里主要講兩種
1.浮動(dòng)
<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觸發(fā)bfc實(shí)現(xiàn)的浮動(dòng)清除鸠踪，使用 clear:both也可以丙者。
效果好像還挺不錯(cuò)，可是這里有一個(gè)潛在的bug
讓我們在 left里面填充一些東西营密，就像這樣
<div class='container'>
<div class='left bgGreen'>0123456789876543210123456789876543210</div>
<div class='right bgRed'></div>
</div>
圖片.png
在 left區(qū)間里面械媒，并沒有發(fā)生想象中的換行行為，而是隨著內(nèi)容的增長评汰，延伸到了區(qū)間外面纷捞。這是由于word-wrap屬性默認(rèn)為 normal，也就是只有在斷字處換行键俱。在平常我們搭頁面的時(shí)候兰绣，由于block元素默認(rèn)占一整行，而inline元素寬度默認(rèn)跟隨內(nèi)容编振。也只需要設(shè)置 left區(qū)間 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
和浮動(dòng)一樣缀辩，也會(huì)有超出區(qū)間不換行的bug情況出現(xiàn)，同樣在 left區(qū)間上面設(shè)置 word-wrap: break-word即可
