在標準文件流中，豎直方向的margin會出現疊加現象（水平方向不會塌陷），兩個margin緊挨著，中間沒有border或者padding
margin直接接觸，就產生了合併
表現為較大的margin會覆蓋掉較小的margin，豎直方向的兩個盒子中間只有乙個較大的margin，這就是margin塌陷現象
先舉個例子
>
>
charset
="utf-8"
>
type
="text/css"
>
body
.box
style
>
head
>
>
class
=>
class
="box"
>
div>
div>
body
>
html
>
原理：父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值.
正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.
但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.
1.給父級設定邊框或內邊距(不建議使用)
2.觸發bfc(塊級格式上下文)改變父級的渲染規則
方法:改變父級的渲染規則有以下四種方法
給父級盒子新增
position：absolute/fixed
display：inline-block;
float：left/right
overflow：hidden
這四種方法都能觸發bfc,但是使用的時候都會帶來不同的麻煩,具體使用中還需根據具體情況選擇沒有影響的來解決margin塌陷
3.使用偽元素（推薦使用）
/* 方法一 */
.clearmar::before
/* 方法二 */
.clearmar::before
為父盒子設定border，為外層新增border後父子盒子就不是真正意義上的貼合
為父盒子設定padding值；（不推薦）
觸發bfc（會有不同的麻煩）
為父盒子新增position：absolute/fixed；
為父盒子新增display：table；
為子盒子新增float：left/right；
為父盒子新增overflow：hidden；
給父盒子新增偽元素（before）（推薦）；
頁面塌陷解決方案大集合
因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最後父級盒子高度為0，就影響了下面的標準流盒子。清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了 選擇器 clear 清除屬性...
CSS盒子塌陷問題解決方案
什麼是盒子塌陷？外部盒子本應該包裹住內部的浮動盒子，結果卻沒有。問題出現的原因 父元素只包含浮動元素，那麼它的高度就會塌縮為零 前提就是你們沒有設定高度 height 屬性，或者設定了為auto，就會出現這種情況，如果父元素不包含任何的可見背景，這個問題會很難被注意到。因為子元素設定了float屬性...
CSS高度塌陷問題解決方案
高度塌陷的存在 原因分析 1doctype html 2 html 3 head 4 meta charset utf 8 5 title title 6 style type text css 78 box1 1314 box2 3435 box3 3940 style 41head 42 bod...