前端css佈局之BFC

哈嘍，各位小夥伴好！今天來整理下前端關於css佈局的一個知識點 - BFC(Block fomatting context)，若是知識點梳理有出錯的地方，望夥伴們幫忙指出，一塊兒進步~

---

1、什麼是 BFC

BFC 能夠理解爲創建一個佈局容器，容器裏按本身的方式來佈局，且與容器外界的元素互不影響。

2、BFC 特性

• 1.BFC裏的佈局跟常規流裏的同樣，例如盒子會在垂直方向排列。
• 2.屬於同一個BFC裏的盒子會產生margin重疊。
• 3.容器內元素的margin的左邊，會與容器的border左邊相接觸。
• 4.BFC容器不會與float元素髮生重疊。
• 5.BFC內的元素不會影響到外部的元素。
• 6.BFC容器計算高度時，內部float元素也參與。

3、怎麼產生 BFC

• 根元素
• float不爲none的浮動元素。
• 絕對定位元素。（position: fixed; 或 position:absolute;）
• overflow值不爲visible的元素。
• display:flex; 、 display:inlie-block; 、 display: table-cell; 等。

4、實例

• 1.產生一個 BFC 容器。

<!-- 1.產生一個 BFC 容器 -->
	<style>
		.wrap {
			background-color: #ccc;
		}
		.fl	{
			float: left;
			background-color: yellow;
		}
		.fl>div {
			border:1px solid #333;
		}
	</style>
	<div class="wrap">
		<div class="fl">
			<div class="div">這是div - 1</div>
			<div class="div">這是div - 2</div>
		</div>
		產生一個 BFC 容器產生一個 BFC 容器產生一個 BFC 容器產生一個 BFC 容器產生一個 BFC 容器產生一個 BFC 容器產生一個 BFC 容器
	</div>
複製代碼

如圖所示，這樣咱們就經過float 來使得 .fl 元素生成一個 BFC 容器，也能夠看到：
1.容器裏的div元素也是垂直排列。（對應上面介紹的特性1 - BFC裏的佈局跟常規流裏的同樣，例如盒子會在垂直方向排列）。
2.容器裏的 div 元素只會撐滿整個BFC容器，並不會對容器外產生影響。（對應上面介紹的特性5 - BFC內的元素不會影響到外部的元素。）

• 2.產生margin重疊

<!-- 產生 margin 重疊 -->
	<style>
		.p1 {
			margin:10px 0;
			background-color: #ccc;
		}
		.p2 {
			margin:10px 0;
			background-color: #eee;
		}
	</style>
	<div class="p1">這是文本1111111111111111</div>
	<div class="p2">這是文本2222222222222222</div>
複製代碼

從圖中能夠看到 .p2 的margin-top和 .p1 的margin-bottom 重疊在一塊兒了，使得他們中間的間距只有10px而不是20px。（對應上面介紹的特性2 - 屬於同一個BFC裏的盒子會產生margin重疊）。 由於跟元素自己也是一個BFC。 解決方法是，建立一個BFC容器：（一個元素只能受一個BFC容器影響，當元素本身也成爲BFC時，就不收根元素影響了）

<!-- 解決產生 margin 重疊 -->
	<style>
		.p1 {
			margin:10px 0;
			background-color: #ccc;
		}
		.wrap {
			overflow:hidden;
		}
		.p2 {
			margin:10px 0;
			background-color: #eee;
		}
	</style>
	<div class="p1">這是文本1111111111111111</div>
	<div class="wrap">
		<div class="p2">這是文本2222222222222222</div>
	</div>
複製代碼

• 3.利用BFC進行左右佈局

<!-- 利用 BFC進行左右佈局 -->
	<style>
		.wrap {

		}
		.fl {
			float: left;
			width: 120px;
			background-color: #eee;
			height: 300px;
		}
		.main {
			background-color: #ccc;
			height: 400px;
			overflow:hidden;
		}

	</style>
	<div class="wrap">
		<div class="fl">左邊</div>
		<div class="main">主體內容主體內容主體內容主體內容主體內容主體內容</div>
	</div>
複製代碼

（對應上面介紹的特性4 - BFC容器不會與float元素髮生重疊）

• 解決浮動元素形成父元素高度出錯

當有子元素浮動時，父元素在計算高度時沒有把浮動元素的高度算進去，因此看到了 .fl 元素超出了父元素。將父元素設成BFC可解決這個問題（對應上面介紹的特性6 - BFC容器計算高度時，內部float元素也參與）

<!-- 解決浮動元素形成的父元素高度出錯 -->
	<style>
		.wrap {
			background-color: #eee;
			overflow:hidden;
		}
		.fl	{
			float: left;
			background-color: #ccc;
			height: 100px;
		}
		.con {
			height: 30px;
		}
	</style>
	<div class="wrap">
		<div class="fl">高度爲100px的浮動元素</div>
		<div class="con">這是文本這是文本這是文本這是文本這是文本</div>
	</div>
複製代碼

以上就是我整理的一些關於BFC的知識點和一些應用。