一分鐘掌握CSS之BFC，margin塌陷

一分鐘入門並掌握CSS之BFC，margin塌陷

大家好，我是YoursJoker，想要走出大山的一個小菜鳥，今天將用簡單易懂的語言，讓大家快速瞭解和掌握CSS中的BFC和margin塌陷（本人新手一枚，各位大佬們多多包涵）

何爲BFC

BFC就是塊級格式化上下文block formatting context

---

BFC特性：

• BFC就是頁面上的一個隔離的獨立容器，容器裏的子元素不會影響到外面的元素
• 計算BFC高度時，浮動元素會被計算進去，可用於清除浮動
• 內部的Box會在垂直方向，從頂部開始一個接一個的放置，相當於文檔流
• Box垂直方向的距離由margin決定，會疊加，而不是取margin-bottom和margin-top的最大值，可解決margin塌陷，關於margin塌陷滑下手指就能看到啦

---

觸發bfc條件

• position：absolute/fixed
• display:inline-block
• float:right/left
• overflow:不爲visible(scroll/hidden/auto)

---

margin塌陷

• 兄弟元素：垂直方向的margin會出現合併，即只取前一個元素margin-bottom或後一個元素margin-top兩者的較大值；水平方向不會出現合併，會正常疊加
• 父子元素：子元素設置margin-top時會忽視父元素上邊,有點像擋不住子元素，子元素“逃”出去了，幹說不是很很清楚，直接上代碼吧

<div class="father">              //父元素紅色
	<div class="son"></div>     //子元素黑色
</div>

.father{
	width: 200px;
	height: 200px;
	background-color: #f00;
	}
.item1{
	margin-top: 20px;         //子元素設置margin-top
	width: 50px;
	height: 50px;
	background-color: #000;
	}

理想的樣子是子元素距離父元素上邊距20px,可實際是子元素直接“忽略”了父元素

解決方法

• 最直接給父元素設置border-width，可我們往往不需要這個邊框，影響美觀，這時就可採用下面這種方法
• 可用前面所講的bfc解決margin塌陷問題

---

• 浮動元素產生了浮動流：所有產生了浮動流的元素，塊級元素看不到他們
• 產生了bfc的元素、文本類型屬性(包括inline inline-block的）文本都能看到浮動元素(圖片配合float可以形成環繞文字的效果哦！)。
• 設置了position:absolute和float:left/right的元素會變成inline-block元素

個人Github，歡迎stars鼓勵一下
個人博客，剛建立不久的博客，有空的大佬可以過來提提建議