行框與浮動與清除浮動

時間 2019-11-24

標籤浮動清除简体版

原文原文鏈接

在實現下面這個效果的時候，我認爲div1會把div2給覆蓋掉，連同"我是div2"文本。由於我給div1加了浮動，div2沒有加。字體

 1 <style>
 2 .divw{width: 300px;background: red;height: 400px;}
 3 .div1{width: 100px;height: 100px;background: dodgerblue;float: left;}
 4 .div2{background: yellow;width: 100px;height: 100px;}
 5 </style>
 6 </head>
 7 <body>
 8     <div class="divw">
 9         <div class="div1">我是div1</div>
10         <div class="div2">我說div2</div>
11     </div>
12 </body>

可是實際是spa

爲何div2的文本沒有上去？由於行框這個東西。浮動會讓元素脫離普通流，原來佔據的空間被div2給佔去了，這裏的空間就是指的普通流的空間。可是浮動以後的元素他是會佔據行框的。code

行框是什麼，就是本行最高的字的高度和他父元素的寬度造成的一個矩形。也就是div2的寬度和「我是div2」字體的高度造成的一個矩形。浮動佔據了行框，「我是div2」理所固然的上不去了。blog

若是我把div2的寬度改的比div1大，那麼「我是div2」就能夠上去了而且在div1的右邊。table

新的知識點：解決高度塌陷class

hack1：給父元素添加聲明overflow：hidden。若是是overflow：auto會出現滾動條。hack

hack2：在父元素裏再加一個空的span，給這個元素添加聲明：clear：bothfloat

hack3：在父元素先後添加僞類： :after,:before，before是爲了解決父元素頂部的外邊距塌陷的，after是爲了解決父元素底部的外邊距塌陷和清楚元素的浮動。方法

以下：im

div:before,div:after{content:" ";display:table;};
div:after{clear:both};
div{*zoom:1};

display:table是爲了在ie6能正常執行。

*zoom：1是指元素的縮放比例，爲1就是原尺寸。是爲了在ie下觸發hasLayout,就是讓他不影響同級元素的意思。

hack3的方法應該是直接給須要清除浮動的元素添加而不是把div換成這個元素的類名。就是把這些樣式定義爲一個類，把須要清除浮動元素添加這個類就行了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。