一、清除浮動的目的。
1、當乙個父元素的高度不寫或為auto時，而且這個父元素內又有浮動的子元素，那麼這時候該父元素的高度將不會自動適應子元素的高度，也可以說高度是0px;
有如下**：
123123此**父元素高度不設定，而且裡面又有左浮動高度為300px的子元素。實際顯示效果為：
可以看到，父div僅僅顯示為其邊框的高度，並沒有適應其子元素的高度，要正確顯示父元素的邊框的話，此時就要清除浮動。我們在原來的**的基礎上加多乙個
以用於清除浮動，實際**如下：
123123現在再來看看現在的效果：//此行**用於清除浮動
注意：清除浮動的元素要放在正確的位置上，必須緊貼著浮動元素。
2、布局錯位問題。
因為浮動元素脫離了標準文件流，因此其它非浮動元素可能會受此影響而錯位。
例如有如下**：
左浮動元素理論上說來，最下面的div與上面的div沒有關係，因此會自動排到上面的div的下面一行。來看效果：右浮動元素
看看我的位置
可以看到，效果不像預期，究其原因，還是上面的父div高度不適應子浮動元素而導致，高度僅僅為邊框的高度，從而下面的div自動頂上去了，因此到此錯位
我們來改寫上面的**如下所示：
左浮動元素上面的**僅僅新增了乙個右浮動元素
看看我的位置
元素用於清除浮動，來看最終效果。
看到效果已經正確了。
但是，如果清除浮動的元素的位置放置不正確會有什麼後果呢？再來改寫下面的**：
<效果如下：div
style
="border:2px solid #000; width:320px;"
>
<
div
style
="width:100px;height:100px;float:left; border:1px solid #555555"
>左浮動元素
div>
<
div
style
="width:100px;height:100px;float:right; border:1px solid #aaaaaa"
>右浮動元素
div>
div>
<
br style
="clear:both;"
/> //稍稍調整了一下清除浮動的元素的位置
<
div>看看我的位置
div>
body
>
可以看到，雖然下面的div的位置正確了，但是上面的父元素還是沒有適應子浮動元素的高度。
1. float缺點：層層往上找，沒完沒了，到了body那，算是個頭 float 和 margin:0 auto; 有衝突
2. display:inline-block;
缺點：不能設定 margin:0 auto;
3. overflow:hidden;
缺點：很多js互動特效做不了，多出去的部分隱藏了
4. 在父級內，加空div：clear:both;
缺點：父級不能加padding，否則ie6 ie7不相容
5. <
br clear
="all"
/>
缺點：每次都要加這個換行符
6. .clear:after
缺點：如果**多了點，也叫缺點的話……
此外，如果父級沒有寬，就必須為父級加上：zoom:1;用來解決ie6 ie7下的問題
CSS之清除浮動
標籤可以是div br hr 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。優點 簡單，少，瀏覽器相容性好。缺點 需要新增大量無語義的html元素，不夠優雅，後期不容易維護。在浮動元素下加 clear，但是在ie6下，塊元素有最小高度，即當hei...
css之清除浮動
清除浮動 在非ie瀏覽器 如firefox 下，當容器的高度為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響 甚至破壞 布局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行的css處...
css之清除浮動
這幾天先整理下清除浮動的方法 產生問題的原因 在乙個容器中，有多個浮動的子元素，會造成顯示結果意想不到的問題。在css規範中，浮動定位不屬於正常的文件流，而是獨立定位的。浮動元素在文件流空出的位置，由後續的 非浮動 元素填充上去 塊級元素直接填充上去，若跟浮動元素的範圍發生重疊，浮動元素覆蓋塊級元素...