兩欄布局是寫頁面時經常用到的，要想實作兩欄布局，就需要明白BFC規則，Block formatting context，直譯為“塊級格式化背景關系”，可以簡單的理解它為一個獨立的區域，把區域內部元素與外部元素區分開，兩者互不干擾，
它的規則：
1.內部元素會在垂直方向一個接一個放置，
2.屬于同一個BFC的兩個元素上下margin會重疊，
3.獨立的BFC的區域不會與浮動元素重疊，
4.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，
5.計算BFC的高度時，浮動元素也參與計算
BFC規則無處不在，根元素html就是一個大的BFC區域，日常練習中遇到的margin上下重疊的bug就是這個原因，另外元素有以下屬性之一也可以觸發BFC：
1.float屬性不為none
2.position為absolute或fixed
3.display為inline-block, table-cell, table-caption, flex, inline-flex
4.overflow不為visible
一、兩欄布局，
這里記錄的方法是通過浮動實作兩欄布局，當我們分別給左右兩個元素設定左右浮動的時候，兩者脫離了檔案流，父元素box就會因為沒有高度而高度塌陷，這時候就可以把box設定成一個BFC區域，讓它內部的浮動元素參與到高度的計算中，
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{margin: 0;padding: 0;}
.box{
width: 400px;
overflow: hidden;
border: 3px solid #f00;
}
.nav{
width: 100px;
min-height: 300px;
float: left;
background: #0f0;
}
.main{
width: 300px;
min-height: 300px;
float: right;
background: #00f;
}
</style>
</head>
<body>
<div >
<div >
nav導航欄
</div>
<div >
main內容欄
</div>
</div>
</body>
</html>
效果圖：
二、實作自適應兩欄布局，
這里高度單位用的%，使其高度也自適應，而屬性值為%時，都是相對父元素的大小來設定，所以須給父元素增加高度屬性值，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0; }
html,body{height:100%;}
.left{
width: 200px;
height:100%;
background:#f00;
float:left;
}
.right{
height:100%;
background:#0f0;
overflow:hidden;
}
</style>
</head>
<body>
<div >浮動元素</div>
<div >自適應</div>
</body>
</html>
效果圖：
三、雙飛翼布局，
再深一層，如果在給右側加一個浮動區域，就可以實作常見的雙飛翼布局，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{
height: 100%;
}
div{
height: 100%;
}
.left{
width:200px;
background: #f00;
float:left;
}
.right{
width:200px;
background: #0f0;
float:right;
}
.center{
background:#f0f;
overflow:hidden;
}
</style>
</head>
<body>
<div >浮動元素</div>
<div >浮動元素</div>
<div >自適應</div>
</body>
</html>
效果圖：
這時候，中間紫色部分就會隨著視窗的放大縮小而變化，
注意：不要把元素center放到left與right之間，那會是另一種效果：
如果元素center在right之前的話，BFC區域不會與浮動重疊，因為它只會受到左邊left元素的影響，不會受到right浮動元素的影響，會把右邊全部填滿，所以會把right元素擠下去，讓center放在兩者之后，它才會受到兩邊的影響，左右都脫離檔案流，center自然就把位置補上去了，
逆戰學習總結，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/67741.html
標籤：Html/Css