css中有一些常見的塌陷問題，尤其是新手遇到之後會很解決，明明**邏輯是正確的，為什麼樣式錯亂了，曾經我也好幾次為這個問題絆倒過，今天做一下記錄總結。
lang
="en"
>
>
charset
="utf-8"
>
>
testtitle
>
>
.content
.box
style
>
head
>
>
class
="content"
>
class
="box"
>
div>
div>
body
>
html
>
父元素雖然沒有設定高度，但是因為子元素的存在，父元素盒子被撐開而擁有了高度，當我為裡面的div加乙個浮動屬性float的時候
.box
在浮動元素末尾，也就是box下面增加
，浪費標籤，不常用
設定父元素的高度，治標不治本，而且不常用
父級新增overflow屬性方法hidden|auto|scroll都可以實現，不推薦
使用after偽元素清除浮動，推薦使用
.content:after
2. 巢狀塊元素垂直外邊距的合併
對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合併。
相比於1而言，我覺得這種合併對新手而言會更難發現和處理，我在這個地方吃的虧我永遠的記得，浪費了我好久的時間，就是搞不清楚為什麼顯示的不對，當時的問題大概是這個樣子：
lang
="en"
>
>
charset
="utf-8"
>
>
testtitle
>
>
body
.content
.box
style
>
head
>
>
class
="content"
>
class
="box"
>
div>
div>
body
>
html
>
body，黃色方塊是乙個大一點的內容框，橙色方塊是黃色方塊裡面的乙個子元素。因為為了頁面美觀，一般為黃色方塊設定乙個上邊距20px。效果如圖
然後在寫子元素的時候，子元素和內容框需要留出乙個50px的邊距，當時腦子都沒想，直接給子元素設定乙個margin-top:50px。以為會得到想要的結果，結果確實這個樣子的：
.box
可以為父元素新增overflow:hidden用padding替換margin
邊框塌陷的問題
今天週六要過來上班，閒來無事就又研究了一下css的問題，前一段時間去面試，被問到邊框塌陷的問題，我是乙個小白，只是知道並沒有深入的去了解，今天在網上查了一下，自己也去敲了一遍，終於有所了解。下面是我寫的乙個demo。開啟瀏覽器，我想有些小白肯定和我想的一樣，樣式呈現出來如下 如果認為如上圖的話 那麼...
css margin塌陷問題
垂直並列 先設定兩個div，並分別設定寬高背景色。挨著不太好看，在原來樣式的基礎上給兩個div設定margin box1設定margin bottom 40px box2設定margin top 20px box1 box2 按照正常的思維40 20 60，所以box1和box2的邊距應該是60px...
css margin塌陷問題
html block1 block2 同級元素1 同級元素2 同級元素3 css body block1 block2 ib 結果圖1 圖2 圖3 先看block1跟block2，按道理說，block1 有margin bottom 10px block2有margin top 20px 那麼blo...