資訊專欄INFORMATION COLUMN
摘要：導(dǎo)致這一現(xiàn)象的最根本原因在于被設(shè)置了的元素會脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結(jié)構(gòu)被破壞，父子關(guān)系解除。
1.引言
對于我們所有的web前端開發(fā)人員，float是或者曾經(jīng)一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那么一點知識，但卻駕馭不了它各種奇怪的現(xiàn)象。
這就是我們又愛又恨的——float。所以，系統(tǒng)的學(xué)一學(xué)float是非常非常有必要的。視頻學(xué)習(xí)可參考張鑫旭的《CSS深入理解之float浮動》，講的很好很透徹。
這里說的“誤用”并不是真正的誤用，而是誤打誤撞使用之后，帶來了真正的效果。
絕大多數(shù)人用float都是為了——橫向排版或者多列布局。這樣的使用是正確的，大部分人都這樣使用，bootstrap的柵格系統(tǒng)也是使用了float來實現(xiàn)的，并且在css3被普及之前，多列布局的最佳解決方案也是使用float——要不然你就用table，或display:table-cell。
但是，這樣使用確實是對float的一種誤解和“誤用”，因為float被設(shè)計出來的初衷是用于——文字環(huán)繞效果。即，一個圖片一段文字，圖片float:left之后，文字會環(huán)繞圖片。
但是，當(dāng)時的多列布局和橫向排版主要是依靠table實現(xiàn)，后來人們見見的發(fā)現(xiàn)，使用table將導(dǎo)致代碼量大、混亂、不利于SEO，然后發(fā)現(xiàn)float+div是一個很不錯的排版解決方案，于是乎——過去幾年“css+div”頁面排版一直是一個熱門話題，也是各種高大上的面試題必考的一項。
如果你只知道float是用來排版，卻不知道float的許多特性，就會導(dǎo)致你在使用float時遇到許多問題。不信請看下文。
2.2 破壞性首先大家來看兩個demo，如下圖。第一個demo是一個簡單不過的例子，顯示效果也很正常。第二個demo，唯一的區(qū)別就在于加了float:left，上層的
這就是float的“破壞性”——float破壞了父標簽的原本結(jié)構(gòu)，使得父標簽出現(xiàn)了坍塌現(xiàn)象。導(dǎo)致這一現(xiàn)象的最根本原因在于：被設(shè)置了float的元素會脫離文檔流。
“脫離文檔流”可以理解為子元素與父元素間的DOM結(jié)構(gòu)被破壞，父子關(guān)系解除。
但是，永遠都不要忘記float被設(shè)計的初衷——實現(xiàn)文字環(huán)繞效果。當(dāng)div中有文字時，文字還是會環(huán)繞在img周圍的，“坍塌”現(xiàn)象消失了。如下圖：
那么，float為什么會被設(shè)計成具有破壞性，為什么會脫離文檔流？這一點非常重要！其實原因非常簡單——為了要實現(xiàn)文字的環(huán)繞效果！
如果float不讓父元素坍塌：
坍塌并脫離文檔流后：
2.3 包裹性如上圖，普通的div如果沒有設(shè)置寬度，它會撐滿整個屏幕。而如果給div增加float:left之后，它突然變得緊湊了，寬度發(fā)生了變化，把內(nèi)容“Phone”包裹了——這就是包裹性。div設(shè)置了float之后，其寬度會自動調(diào)整為包裹住內(nèi)容寬度，而不是撐滿整個父容器。
注意，此時div雖然體現(xiàn)了包裹性，但是它的display樣式是沒有變化的，還是block。
float為什么要具有包裹性？其實答案還得從float的設(shè)計初衷來尋找，float是被設(shè)計用于實現(xiàn)文字環(huán)繞效果的。文字環(huán)繞圖片比較好理解，但是如果想要讓文字環(huán)繞一個div呢？此時div不被“包裹”起來，那么如何去實現(xiàn)環(huán)繞效果？
2.4 清除空格上圖中。第一個例子，正常的img中間是會有空格的，因為多個標簽會有換行，而瀏覽器識別換行為空格，這也是很正常的。第二個例子中，img增加了float:left的樣式，這就使得img之間沒有了空格，四個img緊緊挨著。
“清空格”這一特性的根本原因是由于float會導(dǎo)致節(jié)點脫離文檔流結(jié)構(gòu)。它都不屬于文檔流結(jié)構(gòu)了，那么它身邊的什么換行、空格就都和它沒關(guān)系的，它就盡量的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質(zhì)。
float具有“破壞性”，它會導(dǎo)致父元素“坍塌”，這不我們所期望的。如何去避免float帶來的這種影響呢（也就是我們常說的“清除浮動”） ？方法有很多種，我在這里介紹4中供大家參考，大家可根據(jù)實際情況來選擇。
兩種簡單但不常用的方法：
1.為父元素添加overflow:hidden;
2.浮動父元素
第三種方法clear:borth，不是很常用，但是大家要知道。通過在所有浮動元素下方添加一個clear:both的元素，可以消除float的破壞性。
注意：也可以添加在父div閉合元素下邊，這樣即是第四種方法的實現(xiàn)原理。
第四種方法是大家最需要掌握的，也是Bootstrap正在用的——clearfix
上圖中，我們定義一個.clearfix(只是個類名，可以隨意定義)類，然后對float元素的父元素應(yīng)用這一樣式即可。究其原理，其實就是通過偽元素選擇器，在div后面增加了一個clear:both的元素，跟第三種方法是一個道理。
清除浮動四種方法可概括為：
4.合理使用float布局網(wǎng)頁估計大多數(shù)人誤解了float的原本設(shè)計初衷，但是這里的“誤用”是要加引號的，因為這是一種無心插柳的應(yīng)用。即，用float做網(wǎng)頁布局是很合情合理的，鼓勵同志們繼續(xù)使用。
下面我列舉兩個常用的網(wǎng)頁布局案例，僅供大家參考，不喜勿噴，善意留言！
博客園的主頁就是經(jīng)典的三列布局，很明顯的左、中、右。
對于這種布局，方案是：
注：float的包裹性，使得元素寬度不可設(shè)置，但是可通過內(nèi)部的元素寬度來撐開float元素。
第二，兩列布局以博客園一篇文章的鏈接為例，它分為左、右結(jié)構(gòu)
對于這種布局的格式，方案是：
w.imooc.com/learn/121
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112112.html
摘要：本系列文章重拾主要參考王福朋知多少，結(jié)合自己的理解和學(xué)習(xí)需要，修改或添加了一些內(nèi)容，難免有失偏頗，僅供自我學(xué)習(xí)參考之用。 工作中或多或少的寫一些css，但總感覺掌握的不夠扎實，時而需要查閱一下知識點。我想，一方面跟缺少科班出身式的系統(tǒng)學(xué)習(xí)有關(guān)，另一方面也苦于一直未尋覓到一套合我胃口教程。直到我讀到了王福朋css知多少系列文章，使我有了重新系統(tǒng)學(xué)習(xí)css的想法。 本系列文章（重拾css）...
摘要：來不及解釋，快上車有些瀏覽器不完全支持，現(xiàn)在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項常用的標簽，它們的屬性一般默認為和。的設(shè)計初衷是什么具有包裹性例如和兩者的寬度是不一樣的，不信可以為加上背景色試試。 來不及解釋，快上車... ... 有些瀏覽器不完全支持css3，現(xiàn)在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項？ 常用的html標簽，它們的display屬性一般默認...
摘要：瀏覽器默認樣式中規(guī)定了元素哪些屬于塊剩下的就是流。上圖可知，針對的標簽，你設(shè)置寬度和高度是無效的，通過監(jiān)控可以知道，該元素實際的寬度和高度都是，并不是我們設(shè)定的值。因此，的特點可以總結(jié)為外部看來是流，但是自身卻是一個塊。 1.引言 html元素，除了塊就是流（即平時常說的塊級元素和行內(nèi)元素），而且流都包含在塊中，例如body就是一個塊，而a就是一個流。瀏覽器默認樣式中規(guī)定了html元素...
摘要：擼代碼實現(xiàn)首頁檢驗單查詢成品通用標準審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對角線，將作為邊的相交點。 前言 ?當(dāng)CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right...
摘要：和不同，其他三個元素的位置重新排列了。只要元素會脫離文檔結(jié)構(gòu)，它就會產(chǎn)生破壞性，導(dǎo)致父元素坍塌。的絕對定位元素的定位永遠是相對于瀏覽器邊界的，和其他元素沒有關(guān)系。 1.引言 在學(xué)習(xí)position之前，我們應(yīng)該去思考一個問題：什么情況下我們需要定位？如果沒有定位將無法滿足我們怎樣的需求？我們要知道，被人類創(chuàng)造出來的每一個知識，都有它的用途，都要解決一些之前遇到的問題。 如果沒有定位，我...
閱讀 1158·2023-04-25 17:51
閱讀 2938·2021-11-23 09:51
閱讀 1558·2021-11-08 13:21
閱讀 2594·2021-09-22 15:14
閱讀 1585·2019-08-30 12:48
閱讀 1147·2019-08-29 12:44
閱讀 1200·2019-08-26 12:21
閱讀 1454·2019-08-26 10:47
