結構：
1 <div class="parent"> 2 <div class="left"> 3 <p>left</p> 4 </div> 5 <div class="right"> 6 <p>right</p> 7 <p>right</p> 8 </div> 9 </div>
樣式：
1.解決方案一：float +margin
1 .parent { 2 background-color: grey; 3 width: 300px; 4 height: 200px; 5 6 } 7 .left { 8 float: left;/*元素脫離文檔流，但是內容在文檔流中*/ 9 width: 100px; 10 background-color: skyblue; 11 12 } 13 .right { 14 margin-left: 110px; 15 background-color: greenyellow; 16 } 17 /*優點：易理解 18 缺點：（1）兼容性有點問題，因為left有浮動，right沒有浮動，所以right會有3px的bug，即兩個right文字會想右縮3px，可在left上加margin-right：-100px；來解決，這類似於hack
（2）也因為left有浮動，right沒有，所以在第一個<p>right</p>上清除浮動，right就會掉下去，即在left水平線下
.right p:first-child::before{
clear: both;
content: " ";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}*/
2.解決方案二：float+ margin + fix(上面方法的改進)
結構：
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div>
樣式：
1 .parent { 2 background-color: grey; 3 width: 300px; 4 height: 200px; 5 6 } 7 .left { 8 float: left;/*元素脫離文檔流，但是內容在文檔流中*/ 9 width: 100px; 10 background-color: skyblue; 11 position: relative;/*提高left層級*/ 12 } 13 .right-fix { 14 float: right; 15 width: 100%; 16 margin-left: -100px; 17 } 18 .right { 19 margin-left: 110px; 20 background-color: greenyellow; 21 } 22 p { 23 margin: 0; 24 }
3.解決方案三：float+ overflow
結構是最上面的結構
樣式：
.parent {
background-color: grey;
width: 300px;
height: 200px;
}
.left {
float: left;/*元素脫離文檔流，但是內容在文檔流中*/
width: 100px;
background-color: skyblue;
margin-right: 10px;
}
.right {
overflow: hidden;/*觸發BFC模式（Block Formating context塊級的格式化文本），產生的效果是：BFC模式下的容器里面的內容與外界隔離，外面的內容如：浮動元素是不會影響BFC里的內容的*/
background-color: greenyellow;
}
/*IE6不支持*/
4.解決方案四：table+table-cell （兩列自然等高）
結構：最上面的結構
樣式：
.parent {
background-color: grey;
width: 300px;
height: 200px;
display: table;
table-layout: fixed;/*加速table的渲染，實現布局優先*/
}
.left {
display: table-cell;
width: 100px;
background-color: skyblue;
border-right: 10px solid transparent;
background-clip: padding-box;/*設置列之間的間距*/
}
.right {
display: table-cell;
background-color: greenyellow;
}
5.解決方案五：flex+ flex：1 （兩列自然等高）
結構：最上面的結構
樣式：
.parent {
background-color: grey;
width: 300px;
height: 200px;
display: flex;
}
.left {
width: 100px;
background-color: skyblue;
margin-right: 10px;
}
.right {
flex: 1;/*.right適應到剩下的所有部分*/
background-color: greenyellow;
}
/*flex是css3新增的內容，兼容性低。
flex根據內容去自適應，所以性能是一個問題，通常用flex作小范圍的布局，而不是大范圍的布局，即right中的內容不要太復雜，太多，太多會影響flex的性能*/