三欄布局中間流動（固比固）的實現
阿新 • • 發佈：2018-03-09
middle 關系 bsp brush 重要 pre over div 布局
1.使用float屬性。
css:
.left{
float:left;
width:200px;
height:100px;
background:blue;
}
.middle{
height:100px;
margin:0 200px;
background:black;
}
.right{
float:right;
width:200px;
height:100px;
background:green;
}
html:
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>註意middl層的標簽位置應寫在最後面。
2.使用position屬性
css:
.left{
position: absolute;
top:0;
left:0;
width:200px;
height:100px;
background:blue;
}
.middle{
height:100px;
margin:0 200px;
background:black;
}
.right{
position: absolute;
top:0;
right:0;
width:200px;
height:100px;
background:green;
}
html:
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
3.BFC（塊級格式化上下文）
css:
.left{
float:left;
width:200px;
height:100px;
background:blue;
}
.middle{
height:100px;
overflow:hidden;/*觸發BFC格式*/
background:black;
}
.right{
float:right;
width:200px;
height:100px;
background:green;
}
html:
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
註意這裏的middl層的標簽位置也應寫在最後面。
BFC是W3C CSS 2.1規範中的一個概念，決定了元素如何對內容進行定位，以及與其他元素的關系和相互作用。下表就是成為BFC元素後的特性以及如何成為BFC。
BFC元素最重要的一點就是與外部元素不影響，即碰到浮動元素也不會與其重疊。
三欄布局中間流動（固比固）的實現