最近在學習很多開發過程中容易忽悠但是又很重要的知識點，很多時候用的少不代表它不重要，這裡將它們寫出來以記錄，如果有寫的不好的地方請指正。
margin合併是指塊級元素的上外邊距與下外邊距有時會合併為單個外邊距，有兩點需要理解。
1. 在塊級元素中，不包括浮動和絕對定位元素
2. 只發生在和當前文件流方向的相垂直的方向上
p
第一行p>
第二行p>
.div2
class="div1">
class="div2">div>
div>
由於父級和子級元素的合併，所以頂部的margin為10px，而不是20px。
div2
class="div1">
class="div2">div>
div> 這個
元素的margin-top和margin-bottom合併在一起，所以高度只有1rem。
這裡的解決方法我們分為三種情況來討論，第一種就是解決兄弟元素之間的margin合併情況。
我們可以使用設定浮動元素來解決，例如：
p
第一行p>
第二行p>
margin-top: 10px;
overflow: hidden;
}.div2
class="div1">
class="div2">div>
div>
當然，我們還可以通過設定父元素為塊狀格式化上下文元素、設定border、padding等方式來解決問題。
第三種情況就是空塊級元素的合併，一般為空塊級元素設定乙個高度就能夠避免margin合併的問題。
div2
class="div1">
class="div2">div>
div>
css中的margin合併是為了更好地進行**資訊展示而設計的，為了保證**資訊排版的舒服自然。我們不僅要理解它們存在的意義，而且要合理的運用它們。
正確理解CSS中的margin合併的用法
前言 最近在學習很多開發過程中容易忽悠但是又很重要的知識點，很多時候用的少不代表它不重要，這裡將它們寫出來以記錄，如果有寫的不好的地方請指正。概念margin合併是指塊級元素的上外邊距與下外邊距有時會合併為單個外邊距，有兩點需要理解。場景一 相鄰兄弟元素margin合併 p 第一行第二行 因為第一行...
正確理解 clear both
要注意以下幾點 1 浮動元素會被自動設定成塊級元素，相當於給元素設定了display block 塊級元素能設定寬和高，而行內元素則不可以 2 浮動元素後邊的非浮動元素顯示問題。3 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。4 子元素全為浮動元素的元素高度自適應問題。以下詳細分析...
正確理解 clear both
原文 要注意以下幾點 1 浮動元素會被自動設定成塊級元素，相當於給元素設定了display block 塊級元素能設定寬和高，而行內元素則不可以 2 浮動元素後邊的非浮動元素顯示問題。3 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。4 子元素全為浮動元素的元素高度自適應問題。以下詳...