目前學習css，布局時經常遇到這種問題，後來才知道這叫高度塌陷，索性寫篇文章總結下。may you like it.
首先理順幾個問題：
q：什麼是高度塌陷？
a： 子元素撐破了父元素，父元素無法包裹住子元素，見下：
效果：父級div有高度塌陷
q：浮動為什麼會造成高度塌陷？
a：浮動會破壞文件流結構，提公升層級，浮動的div的層級和父級一樣，但是父級又沒有給定高寬度值，所以它就無拘無束的跑出來玩了。
q：如何解決呢？
a : 我能想到的有以下幾個方法。
1：給父級也加高度，使之能包裹住子元素。上圖說話：
**效果圖：
但這樣不利於擴充套件，如果有幾百個div呢？每個都新增，形成**冗餘。
2：給父級也加浮動，同樣地，擴充套件性不好，並且需要不斷給父元素加浮動，給body加，給html加，同時margin：0 auto會失效。
3： 給父級加樣式： inline-block(和2一樣的原理，margin：0 auto會失效)
4： 在子級的同級加空div，加樣式：clear：both（ie6下有最小高度偏差的相容性問題）
5： 在子級的同級加：
(頁面有很多需要清浮動怎麼辦？都寫嗎？不符合結構樣式行為，三者分離的要求)
6：給父級加：overflow:hidden ，這是最常見的做法之一，會造成有些東西被隱藏，尤其在做**導航選單時，不方便。
0： 最優雅的hacker來了，不需要多加標籤。給父級加 after偽類清浮動，其本質都是不變的，先加某個東西==》把某東西變成塊元素==》清除浮動的樣式。
**效果圖：
和浮動類似，定位也會提公升元素的層級，目前我知道的辦法是給父級也加高度。
CSS 浮動和高度塌陷
溢位文字為省略號 p 溢位文字兩行之後為省略號 p 文字 數字的字串兩行之後為省略號 p 1 相鄰塊元素垂直外邊距的合併當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直距離不是margin bottom與ma...
CSS 浮動，高度塌陷和BFC，清除浮動
通過浮動，可以使乙個元素向其父元素的左側或右側移動，使用 float 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流，不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時，不會超過...
清除浮動引起的高度塌陷的7種方法
float會引起高度塌陷問題。觸發條件 子元素全是float元素 且 父元素沒有設定高度。解決方法 1.給父元素設定高度 2.設定乙個空標籤，並且給此標籤加上 clear both 3.4.給父元素設定 overflow hidden 5.給父元素設定 overflow auto 6.給父元素設定浮...