標籤彙整:float

解決子元素float而父元素高度無法自動撐高的問題

最佳解法:在父元素加上overflow:auto即可

其他解法

1.#C為父元素,使用:after

#C:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden; }

2.在float子元素最後加上一個div使用clear:both

3.在父元素加上float:left;(但如果不要底下的元素浮到旁邊,要搭配width:100%的設定,好處是子元素可使用負值的margin而不會被隱藏)

消除IE7以下版本在float時,margin變雙倍的問題

參考文章:display:inline可以消除IE6和IE7下的浮动BUG

bug 描述:在 IE7 以下版本,假設使用 float:left;,那如果再設定 margin-left:5px; 時,實際上顯示的 margin-left 會變成兩倍,也就是10px。只有設定跟float同一邊的margin才會有變兩倍的問題。

解法:在設定float元素上加上 display:inline; 即可。