在今天的布局訓練中學到了運用float來使標籤浮動，這樣便於排版，但在使用float的過程中，有的塊在浮動後塊內的塊標籤是不需要浮動的，這時就需要清楚浮動效果。
清楚浮動效果有三種方式： 1：
.cleer2:
.cleer.fd
.fd:after
1、3畫素bug，
是ie6的乙個著名的bug，當浮動元素與非浮動元素相鄰時，這個3畫素的bug就會出現，明顯看出，ie6會在兩個div中間加上3px的空隙，那麼要解決這個問題，請在左邊的div上加上_margin-right:-3px;記住，前邊加上一下劃線，這樣這個樣式專門針對ie6生效。ie7和ff下還會正常顯示。看看，是不是問題已經解決了。但它不能通過w3c驗證。當兩列固定寬度時，最好把#main也固定寬度且向右浮動，這樣就可以避免ie6的3畫素bug了。
2、按照我們正常的理解，認為應該是兩個值相加，其實這裡是兩個合併後取最大值。用css手冊中的話說：塊級元素的垂直相鄰外邊距會合併，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合併。同樣地，浮動元素的外邊距也不會合併。允許指定負的外邊距值，不過使用時要小心。
3、父容器使用相對定位，子元素使用絕對定位後，這樣子元素的位置不再相對於瀏覽器左上角，而是相對于父視窗左上角，相對定位和絕對定位需要配合top、right、bottom、left使用來定位具體位置，這四個屬性只有在該元素使用定位後才生效，其它情況下無效。另外這四個屬性同時只能使用相鄰的兩個，不能即使用上又使用下，或即使用左，又使用右！
4、border-collapse 屬性設定**的邊框是否被合併為乙個單一的邊框，還是象在標準的 html 中那樣分開顯示。
table
瀏覽器支援
所有主流瀏覽器都支援 border-collapse 屬性。
注釋：任何的版本的 internet explorer （包括 ie8）都不支援屬性值 "inherit（
繼承）"。
separate 預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse 如果可能，邊框會合併為乙個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit 規定應該從父元素繼承 border-collapse 屬性的值。
5、浮動後父容器高度自適應
當乙個容器內元素都浮動後，它將高度將不會隨著內部元素高度的增加而增加，所以造成內容元素的顯示超出了容器。為了便於檢視效果，把剛才例項中的#layout增加乙個邊框和內邊距：
#layout
看到沒，它沒有被內容元素給撐高，要解決這個問題，需要使用以下樣式
overflow:auto; zoom:1;
overflow:auto;是讓高度自適應， zoom:1;是為了相容ie6而寫（此樣式不能通過w3c驗證）。
6、ie6的乙個bug，(ie6雙倍邊距bug)，只要滿足下面3個條件才會出現這個bug:
1）要為塊狀元素；
2）要左側浮動；
3）要有左外邊距(margin-left)；
解決這個bug很容易，只需要在相應的塊狀元素的css樹形中加入「display:inline;」
#redblock7
#menu ul
#menu
#menu ul
#menu ul li
#menu ul li a
#menu ul li a:hover
這裡的#menu ul li a本來是可以不加float:left的，但ie6下在li沒有設定寬度，#menu ul li a設定display:block的情況下，將會顯示錯亂，所以需要在a上增加float:left來修正。
清除浮動的三種方法
lang en charset utf 8 清除浮動的三種方法title type text css div3 div3 after style head style background blue border 1px solid gold 使用空標籤清除浮動。增加了無意義的結構元素 style ...
清除浮動的三種方法
在我使用浮動時，為我們帶來了便利的同時也帶了一點影響，我們在使用浮動時往往不會給父級盒子新增高度，因為子盒子會撐起父盒子。這樣一旦我們使用浮動，則下面使用的div會跑到父級盒子的位置，畢竟使用浮動，不占有位置，解決此問題我列出了三種方法，希望能幫助大家。1 在浮動元素後新增空標籤 eg 111222...
清除浮動的三種方法
浮動布局，float left 會使當前元素脫離文件流，從而失去對父級元素的支撐，如果此時父級元素沒有設定高度，下面的元素就會擠上去，因此需要清除浮動 給浮動元素的父級元素設定overflow hidden 在浮動元素的同級下新增乙個空標籤，並且設定clear both 浮動元素的父級元素使用 af...