float
是我們在頁面布局中常用的，也是非常重要的乙個屬性，可以讓頁面布局變得更加靈活。
但是在繼續學習之後，尤其是掌握了寬高自適應之後，我們常常會發現乙個奇怪的現象：如果父元素沒有設定高度，而子元素都浮動了的話，父元素就「癟」了。
就像下面這樣
<html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
type
="text/css"
>
.box1
.boxl
.boxr
style
>
head
>
<
body
>
<
div
class
="box1"
>
紙
<
div
class
="boxl"
>大火
div>
<
div
class
="boxr"
>小火
很顯然，紙是包不住火的。
但是這顯然不是我們想要的那樣。我們希望能使用浮動調整內部的布局，又希望父元素不會高度塌陷，要怎樣做呢？我總結了四種方法。
第一種方法：新增高度
很簡單，既然父元素高度自適應會塌陷，那就不自適應了，直接加上固定高度，那肯定是不會塌了。但是這種方法在頁面設計中顯然是不太合適的。因為比較簡單，**就不再附上了。
第二種方法：overflow:hidden;或者overflow:auto;
這兩種方法是利用對溢位元素的處理，使父元素緊貼子元素的邊界，這樣一來，高度塌陷也就解決了，只不過，因為是元素溢位屬性，所以真有元素溢位的話，也會按照給的屬性值執行。
一種情況無法顯示所有的內容，一種則會出現滾動條，都是各有缺陷。
還有一種方法，是在浮動的子元素下面新增乙個空元素，新增屬性clear:both;
顧名思義，這個屬性的作用就是清除浮動，不過不是清除其他元素的浮動，而是清除左右浮動對自己的影響。
<html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
type
="text/css"
>
.box1
.boxl
.boxr
.clear
style
>
head
>
<
body
>
<
div
class
="box1"
>
紙
<
div
class
="boxl"
>大火
div>
<
div
class
="boxr"
>小火
看，新增這樣乙個子元素後，父元素的高度也填充起來了。
只要把這個子元素設定成空的，既不會影響整體樣式，父元素也不會塌陷了。
只是這樣一來，頁面中就要新增很多空標籤，無意義的**很多，也很影響閱讀。於是在這之上，可以使用偽物件來簡化**。
在原**的基礎上新增.box1::after
再來看一下效果
這下，紙真的可以包住火了。
最後一種方法在我的學習中被稱為萬能清除法，事實上，現在的頁面開發中也常用這種方法來解決高度塌陷問題。
總結一下，解決高度塌陷的方法有四種：
1 新增固定高度 簡單粗暴 適合固定內容固定高度的頁面布局
2 overflow溢位隱藏 缺點是溢位內容會被隱藏或出現滾動條
3 浮動元素底部新增空標籤屬性clear:both; **冗餘 可讀性差
4 利用偽物件簡化** 可復用
float浮動後，父級元素高度塌陷和遮蓋問題
當子元素不浮動的時候，父元素的高度是由子元素撐起來的。子元素a和b是兩個div，獨佔一行 效果如圖 當子元素b浮動起來之後，父元素高度塌陷到只剩子元素a的高度 效果如圖 當給子元素a div 設定css屬性 display inline 後，a的寬高將不起作用，寬高由內容撐開，即被字母a撐開。此時父...
CSS 浮動和高度塌陷
溢位文字為省略號 p 溢位文字兩行之後為省略號 p 文字 數字的字串兩行之後為省略號 p 1 相鄰塊元素垂直外邊距的合併當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直距離不是margin bottom與ma...
浮動造成的高度塌問題 清除浮動
首先給定兩個盒子 設定盒子樣式為 box1 box2 用浮動可以解決盒子間隙問題但是會造成高度塌陷，也就是outer的盒子沒高度了。此時使用內牆法可以解決。在給定的盒子裡面再加乙個盒子如 然後給這個盒子指定樣式如 outer clearfix 這樣就會解決高度塌陷問題啦。第二種方法 父元素新增 ov...