前端css佈局之BFC

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

一、什麼是 BFC

BFC 可以理解為建立一個佈局容器，容器裡按自己的方式來佈局，且與容器外界的元素互不影響。

二、BFC 特性

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

三、怎麼產生 BFC

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

四、例項

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的知識點和一些應用。

前端css佈局之BFC

一、什麼是 BFC

二、BFC 特性

三、怎麼產生 BFC

四、例項

相關文章