前端清除浮動的幾種方法

　　在前端開發(fā)中，浮動是經(jīng)常用到的一種樣式技巧，但同時也會帶來一些問題，如高度塌陷(clearfix)，不規(guī)則盒模型等。下面介紹幾種清除浮動的方式，并提供詳細(xì)的代碼演示。

　　1.父級div定義height

　　父級div手動定義height值，但如果子元素高度超出父元素，則會出現(xiàn)內(nèi)容溢出的情況。

<div style="background-color: #ccc; height: 200px;">
  <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
  <div style="float: right; width: 100px; height: 150px; background-color: blue;"></div>
</div>

　　2.使用clear:both

　　在浮動元素下方添加一個空div元素，利用clear:both清除浮動。但這種方式會增加無意義的標(biāo)簽。

<div style="background-color: #ccc;">
  <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
  <div style="float: right; width: 100px; height: 150px; background-color: blue;"></div>
  <div style="clear: both;"></div>
</div>

　　3.使用overflow:auto

　　父級div添加overflow:auto樣式，可以自動清除子元素的浮動，但需要注意滾動條的出現(xiàn)。

<div style="background-color: #ccc; overflow: auto;">
  <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
  <div style="float: right; width: 100px; height: 150px; background-color: blue;"></div>
</div>

　　4.使用偽元素::after

　　在父級div中使用偽元素::after，利用clear:both清除浮動，但需要注意添加content屬性，否則在某些瀏覽器中可能不起作用。

<div style="background-color: #ccc; position: relative;">
  <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
  <div style="float: right; width: 100px; height: 150px; background-color: blue;"></div>
  <div style="clear: both;"></div>
  <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 0; content: '';"></div>
</div>

　　以上幾種方式都可以清除浮動，具體使用哪種方式取決于實(shí)際情況和需求。