摘要：父元素的頂端會(huì)限制浮動(dòng)元素防止一直浮動(dòng)到頁面頂端。例子戳這里清除浮動(dòng)清除浮動(dòng)的目的是為了解決高度塌陷的問題撐開浮動(dòng)父元素。原理會(huì)在元素的之上增加一個(gè)清除區(qū)域這個(gè)區(qū)域會(huì)在元素的上增加額外間隔并且不允許浮動(dòng)元素進(jìn)入這個(gè)區(qū)域。

浮動(dòng)元素會(huì)脫離文檔的普通流,根據(jù)float的值向左或向右移動(dòng),直到它的外邊界碰到父元素的內(nèi)邊界或另一個(gè)浮動(dòng)元素的外邊界為止。由于浮動(dòng)框不在文檔的普通流中,所以文檔的普通流中的塊級(jí)元素表現(xiàn)得就像浮動(dòng)元素不存在一樣。

當(dāng)給元素設(shè)置float之后,元素脫離文檔流,父元素沒有設(shè)置height,造成塌陷。

    



.super{
    border:1px solid blue;
}

.sub{
  float: left;
  background: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

在不設(shè)置margin為負(fù)值和父元素還有剩余空間的情況下,浮動(dòng)元素的外邊界(margin)不會(huì)超出父元素的內(nèi)邊界(padding)。

    

    

 

.super{
    margin: 0 auto;
    padding: 10px;
    border:1px solid blue;
     width: 300px;
}

.super:after{
  clear: both;
  content: "";
  display: block;
}

.sub1{
  float: left;
  background: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

.sub2{
  float: right;
  background: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

這個(gè)也是在margin不會(huì)為負(fù)值和父元素還有剩余空間的條件下適用的。
這個(gè)是我對(duì)《CSS權(quán)威指南》中浮動(dòng)這一章節(jié)中規(guī)則二和規(guī)則三的理解,以下是原文。

2.The left (or right) outer edge of a floated element must be to the right (or left) of the right (left) outer edge of a left-floating (or right-floating) element that occurs earlier in the document’s source, unless the top of the later element is below the bottom of the former.
3.The right outer edge of a left-floating element may not be to the right of the left outer edge of any right-floating element to its right. The left outer edge of a right- floating element may not be to the left of the right outer edge of any left-floating element to its left.

這兩個(gè)規(guī)則是保證兩個(gè)浮動(dòng)元素不重疊的基礎(chǔ)。

表現(xiàn)為當(dāng)一個(gè)浮動(dòng)元素往左(右)靠的時(shí)候,在這個(gè)元素左(右)邊已經(jīng)存在一個(gè)浮動(dòng)元素,他們不會(huì)重疊,后來者緊挨著先來者排列。如果浮動(dòng)元素們的總寬度已經(jīng)超過父元素的寬度,浮動(dòng)元素之間也不會(huì)重疊,依照HTML結(jié)構(gòu)的順序,從在一行排列不下的浮動(dòng)元素開始會(huì)移動(dòng)到下一行。

例子戳這里!

這個(gè)規(guī)則也是在margin-top不為負(fù)值的情況下成立。

父元素的頂端會(huì)限制浮動(dòng)元素,防止一直浮動(dòng)到頁面頂端。
對(duì)于下圖右邊的例子,sub2在sub1下面,sub1右邊的空間已經(jīng)不足以容納sub2,但是足夠容納sub3,而sub3沒有上浮,那是因?yàn)樗牡捻敹司筒荒艹^sub2的頂端,這個(gè)例子足以印證浮動(dòng)元素的頂端不能比之前出現(xiàn)的浮動(dòng)元素頂端高。

例子戳這里!

清除浮動(dòng)的目的是為了解決高度塌陷的問題,撐開浮動(dòng)父元素。常用的一般有幾種方法:

把上面這句標(biāo)簽放到浮動(dòng)元素的父元素的最后。

原理:clear會(huì)在元素的margin-top之上增加一個(gè)清除區(qū)域(clearance),這個(gè)區(qū)域會(huì)在元素的margin-top上增加額外間隔,并且不允許浮動(dòng)元素進(jìn)入這個(gè)區(qū)域。

優(yōu)點(diǎn):方便,兼容性強(qiáng)。

缺點(diǎn):多出許多無意義的標(biāo)簽,增加維護(hù)成本,而且稍不注意中間多了個(gè)空格會(huì)產(chǎn)生一段空白高度。

優(yōu)點(diǎn):簡(jiǎn)單,代碼少,瀏覽器支持好。
缺點(diǎn):父級(jí)使用浮動(dòng)之后,浮動(dòng)造成的影響仍舊存在,并且不可能父級(jí)往上一級(jí)級(jí)都使用浮動(dòng)。

.fix{
    overflow:hidden(auto、scroll); 
    zoom:1;
}

優(yōu)點(diǎn):代碼簡(jiǎn)潔,兼容性好,不產(chǎn)生多余標(biāo)簽。

缺點(diǎn):設(shè)置該fix類的標(biāo)簽的內(nèi)容超出該標(biāo)簽的時(shí)候會(huì)被隱藏(或產(chǎn)生滾動(dòng)條)。

優(yōu)點(diǎn):簡(jiǎn)單,代碼少,瀏覽器支持好。
缺點(diǎn):父級(jí)使用浮動(dòng)之后,浮動(dòng)造成的影響仍舊存在,并且不可能父級(jí)往上一級(jí)級(jí)都使用浮動(dòng)。

原理:在position的值不為relative或static的情況下,會(huì)形成BFC。

這種方式在父元素原本就需要設(shè)置position為fixed或者absolute的時(shí)候可以優(yōu)先采用。

優(yōu)點(diǎn):簡(jiǎn)單,代碼少,瀏覽器支持好。
缺點(diǎn):改變父元素布局,影響整體布局。

.fix:after{
    display:block; 
    content:""; 
    clear:both; 
}

原理類似添加新的標(biāo)簽然后設(shè)置clear:both;,但使用偽類的方法沒有多余標(biāo)簽。

優(yōu)點(diǎn):代碼簡(jiǎn)潔,兼容性好,不產(chǎn)生多余標(biāo)簽。

以上方法中,第一種增加一個(gè)樣式為clear:both的空標(biāo)簽的方法不建議使用,會(huì)增加無意義標(biāo)簽,其他設(shè)置父元素浮動(dòng),改變父元素position、overflow的方法依情況而定,如果父元素本身就有這方面的樣式需求,那很合適,如果沒有的話還是采用最后一種偽元素的:after的方式最為常見。

關(guān)于浮動(dòng)的學(xué)問還有更可深入的空間,這篇博客也只是對(duì)自己學(xué)習(xí)的成果起到梳理作用,對(duì)于浮動(dòng)在各場(chǎng)景產(chǎn)生的影響,需要大量的實(shí)踐去累積去體會(huì),才能深刻掌握float,在日后有新的認(rèn)識(shí)的時(shí)候會(huì)再回來更新,如有不同見解也歡迎大家前來指正。

《CSS權(quán)威指南》

CSS float浮動(dòng)的深入研究、詳解及拓展(一) by 張?chǎng)涡?/p>

CSS float浮動(dòng)的深入研究、詳解及拓展(二) by 張?chǎng)涡?/p>