兩欄佈局，左側固定寬度，右側自適應大小
阿新 • • 發佈：2019-02-09
html程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS佈局</title>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>第一種方式
*{margin:0; padding: 0;} 第二種方式
*{margin:0; padding: 0;}
html,body{
height: 100%;/*高度百分百顯示*/
}
#left{
width: 300px 第二種方法，我利用的是建立一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的佈局環境，它內部元素的佈局不受外面佈局的影響。它可以通過以下任何一種方式來建立：
float 的值不為 none
position 的值不為 static 或者 relative
display 的值為 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一個
overflow 的值不為
visible
關於BFC，在w3c裡是這樣描述的：在BFC中，每個盒子的左外邊框緊挨著 包含塊 的 左邊框 （從右到左的格式化時，則為右邊框緊挨）。即使在浮動裡也是這樣的（儘管一個包含塊的邊框會因為浮動而萎縮），除非這個包含塊的內部建立了一個新的BFC。這樣，當我們給右側的元素單獨建立一個BFC時，它將不會緊貼在包含塊的左邊框，而是緊貼在左元素的右邊框。