一、在父元素底部加一行代碼
<body>
<div class="content">
<h1>沉默的大多數(shù)</h1>
<p> 我現(xiàn)在寫的東西大體屬于文學(xué)的范疇，所謂文學(xué)，在我看來就是：先把文章寫好看了再說，別的就不用管他媽的。除了文學(xué)，
我想不到有什么地方可以接受我這些古怪想法。賴在文學(xué)上，可以給自己在圈子中找到一個立腳點。有這樣一個立腳點，就可以攻擊這個圈子，攻擊整個陽的世界。</p>
<p>幾年前，我在美國讀書。有個洋鬼子這樣問我們：你們中國那個陰陽學(xué)說，怎么一切好的東西都屬陽，一點不給陰剩下？當然，她這樣發(fā)問，是因為她正是一個五體不全之陰人。但是這話也有些道理。話語權(quán)屬于陽的一方，它當然不會說陰的一方任何好話。就是夫子也未能免俗，他把婦女和小人攻擊了一通。這句話幾千年來總被人引用，但我就沒聽到受攻擊一方有任何回應(yīng)。人們只是小心提防著不要做小人，
至于怎樣不做婦人，這問題一直沒有解決。就是到了現(xiàn)代，女變男的變性手術(shù)也是一個難題，而且也不宜推廣——這世界上假男人太多，真男人就會找不到老婆。</p>
<div style="clear:both;"></div>
</div>
</body>
我們在父元素底部增加了一行空的div標簽，并且為其設(shè)置了樣式clear:both，這種方法通俗易懂，容易掌握。但缺點是添加了無意義的空標簽，違背了結(jié)構(gòu)表現(xiàn)分離，給后期維護帶來了問題。
二、給父元素增加一行CSS
div.content{
float:left;
}
讓父元素也一起浮動，父元素和子元素又一起排列了，所以父元素高度就可以恢復(fù)了，但是這很明顯是一種將錯就錯的方法，父元素本來就不需要浮動，為了解決高度問題讓父元素浮動又會引發(fā)其他問題。
三、利用BFC(Block Formatting Content)來給父元素增加CSS
div.content{
overflow:auto;
}
上面只是一種做法，你還可以加display:table-cell;或display:table-caption;或display:inline-block;或position:fixed;或position:absolute等等。
使用CSS中after的偽元素
給父元素的div添加一個clearfix的class類，<div class="content clearfix">，然后設(shè)置CSS
.clearfix:after{
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
這種方法其實有點類似于第一種方法，不過這種方法是通過after偽元素來給父元素末尾添加一個看不見的clear:both;的塊元素，來達到清除浮動的目的。其中content: ".";是為了加一段內(nèi)容，display: block;是為了讓生成的元素以塊級元素顯示，占滿剩余空間，height: 0px;是為了避免生成的內(nèi)容避免原有布局的高度， visibility: hidden;是為了讓生成的元素不可見。
五、更優(yōu)雅的改進——尼古拉斯大師方法 (現(xiàn)在流行的方法?。?
.clearfix:after,
.clearfix:before{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
上述代碼把display設(shè)置為table，可以創(chuàng)建一個匿名的表格單元，這個匿名的表格單元可以直接觸發(fā)BFC，然后再直接設(shè)置content: " ";，把內(nèi)容設(shè)置為一個空格，這樣就節(jié)省了不必要的代碼。加上before對于清除浮動沒有什么必要性，主要目的是防止瀏覽器頂部的空白崩潰，即是指此盒子的margin-top與上一個盒子的margin-bottom會發(fā)生折疊，（在同一個BFC中兩個毗鄰的塊級盒子在垂直方向（和布局有關(guān)系）的margin會發(fā)生折疊）。
