成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

重拾css(9)——float

CollinPeng / 1087人閱讀

摘要：導(dǎo)致這一現(xiàn)象的最根本原因在于被設(shè)置了的元素會(huì)脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結(jié)構(gòu)被破壞，父子關(guān)系解除。

1.引言

對(duì)于我們所有的web前端開發(fā)人員，float是或者曾經(jīng)一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡(jiǎn)單就那么一點(diǎn)知識(shí)，但卻駕馭不了它各種奇怪的現(xiàn)象。
這就是我們又愛又恨的——float。所以，系統(tǒng)的學(xué)一學(xué)float是非常非常有必要的。視頻學(xué)習(xí)可參考張?chǎng)涡竦摹禖SS深入理解之float浮動(dòng)》，講的很好很透徹。

2.重新認(rèn)識(shí)float 2.1 誤解和“誤用”

這里說的“誤用”并不是真正的誤用，而是誤打誤撞使用之后，帶來了真正的效果。
絕大多數(shù)人用float都是為了——橫向排版或者多列布局。這樣的使用是正確的，大部分人都這樣使用，bootstrap的柵格系統(tǒng)也是使用了float來實(shí)現(xiàn)的，并且在css3被普及之前，多列布局的最佳解決方案也是使用float——要不然你就用table，或display:table-cell。
但是，這樣使用確實(shí)是對(duì)float的一種誤解和“誤用”，因?yàn)閒loat被設(shè)計(jì)出來的初衷是用于——文字環(huán)繞效果。即，一個(gè)圖片一段文字，圖片float:left之后，文字會(huì)環(huán)繞圖片。


但是，當(dāng)時(shí)的多列布局和橫向排版主要是依靠table實(shí)現(xiàn)，后來人們見見的發(fā)現(xiàn)，使用table將導(dǎo)致代碼量大、混亂、不利于SEO，然后發(fā)現(xiàn)float+div是一個(gè)很不錯(cuò)的排版解決方案，于是乎——過去幾年“css+div”頁(yè)面排版一直是一個(gè)熱門話題，也是各種高大上的面試題必考的一項(xiàng)。

如果你只知道float是用來排版，卻不知道float的許多特性，就會(huì)導(dǎo)致你在使用float時(shí)遇到許多問題。不信請(qǐng)看下文。

2.2 破壞性

首先大家來看兩個(gè)demo，如下圖。第一個(gè)demo是一個(gè)簡(jiǎn)單不過的例子，顯示效果也很正常。第二個(gè)demo，唯一的區(qū)別就在于加了float:left，上層的

卻出現(xiàn)了“坍塌”現(xiàn)象。

這就是float的“破壞性”——float破壞了父標(biāo)簽的原本結(jié)構(gòu)，使得父標(biāo)簽出現(xiàn)了坍塌現(xiàn)象。導(dǎo)致這一現(xiàn)象的最根本原因在于：被設(shè)置了float的元素會(huì)脫離文檔流。

“脫離文檔流”可以理解為子元素與父元素間的DOM結(jié)構(gòu)被破壞，父子關(guān)系解除。

但是，永遠(yuǎn)都不要忘記float被設(shè)計(jì)的初衷——實(shí)現(xiàn)文字環(huán)繞效果。當(dāng)div中有文字時(shí)，文字還是會(huì)環(huán)繞在img周圍的，“坍塌”現(xiàn)象消失了。如下圖：

那么，float為什么會(huì)被設(shè)計(jì)成具有破壞性，為什么會(huì)脫離文檔流？這一點(diǎn)非常重要！其實(shí)原因非常簡(jiǎn)單——為了要實(shí)現(xiàn)文字的環(huán)繞效果！
如果float不讓父元素坍塌：

坍塌并脫離文檔流后：

2.3 包裹性

如上圖，普通的div如果沒有設(shè)置寬度，它會(huì)撐滿整個(gè)屏幕。而如果給div增加float:left之后，它突然變得緊湊了，寬度發(fā)生了變化，把內(nèi)容“Phone”包裹了——這就是包裹性。div設(shè)置了float之后，其寬度會(huì)自動(dòng)調(diào)整為包裹住內(nèi)容寬度，而不是撐滿整個(gè)父容器。

注意，此時(shí)div雖然體現(xiàn)了包裹性，但是它的display樣式是沒有變化的，還是block。

float為什么要具有包裹性？其實(shí)答案還得從float的設(shè)計(jì)初衷來尋找，float是被設(shè)計(jì)用于實(shí)現(xiàn)文字環(huán)繞效果的。文字環(huán)繞圖片比較好理解，但是如果想要讓文字環(huán)繞一個(gè)div呢？此時(shí)div不被“包裹”起來，那么如何去實(shí)現(xiàn)環(huán)繞效果？

2.4 清除空格

上圖中。第一個(gè)例子，正常的img中間是會(huì)有空格的，因?yàn)槎鄠€(gè)標(biāo)簽會(huì)有換行，而瀏覽器識(shí)別換行為空格，這也是很正常的。第二個(gè)例子中，img增加了float:left的樣式，這就使得img之間沒有了空格，四個(gè)img緊緊挨著。
“清空格”這一特性的根本原因是由于float會(huì)導(dǎo)致節(jié)點(diǎn)脫離文檔流結(jié)構(gòu)。它都不屬于文檔流結(jié)構(gòu)了，那么它身邊的什么換行、空格就都和它沒關(guān)系的，它就盡量的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質(zhì)。

3.清除float（清除浮動(dòng)）

float具有“破壞性”，它會(huì)導(dǎo)致父元素“坍塌”，這不我們所期望的。如何去避免float帶來的這種影響呢（也就是我們常說的“清除浮動(dòng)”） ？方法有很多種，我在這里介紹4中供大家參考，大家可根據(jù)實(shí)際情況來選擇。
兩種簡(jiǎn)單但不常用的方法：

1.為父元素添加overflow:hidden;

2.浮動(dòng)父元素

第三種方法clear:borth，不是很常用，但是大家要知道。通過在所有浮動(dòng)元素下方添加一個(gè)clear:both的元素，可以消除float的破壞性。

注意：也可以添加在父div閉合元素下邊，這樣即是第四種方法的實(shí)現(xiàn)原理。
第四種方法是大家最需要掌握的，也是Bootstrap正在用的——clearfix

上圖中，我們定義一個(gè).clearfix(只是個(gè)類名，可以隨意定義)類，然后對(duì)float元素的父元素應(yīng)用這一樣式即可。究其原理，其實(shí)就是通過偽元素選擇器，在div后面增加了一個(gè)clear:both的元素，跟第三種方法是一個(gè)道理。

清除浮動(dòng)四種方法可概括為：

4.合理使用float布局網(wǎng)頁(yè)

估計(jì)大多數(shù)人誤解了float的原本設(shè)計(jì)初衷，但是這里的“誤用”是要加引號(hào)的，因?yàn)檫@是一種無心插柳的應(yīng)用。即，用float做網(wǎng)頁(yè)布局是很合情合理的，鼓勵(lì)同志們繼續(xù)使用。
下面我列舉兩個(gè)常用的網(wǎng)頁(yè)布局案例，僅供大家參考，不喜勿噴，善意留言！

第一，三列布局

博客園的主頁(yè)就是經(jīng)典的三列布局，很明顯的左、中、右。


對(duì)于這種布局，方案是：

注：float的包裹性，使得元素寬度不可設(shè)置，但是可通過內(nèi)部的元素寬度來?yè)伍_float元素。

第二，兩列布局

以博客園一篇文章的鏈接為例，它分為左、右結(jié)構(gòu)

對(duì)于這種布局的格式，方案是：

w.imooc.com/learn/121

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112112.html

相關(guān)文章

  • 重拾css(1)——寫在前邊的話

    摘要：本系列文章重拾主要參考王福朋知多少，結(jié)合自己的理解和學(xué)習(xí)需要，修改或添加了一些內(nèi)容，難免有失偏頗，僅供自我學(xué)習(xí)參考之用。 工作中或多或少的寫一些css，但總感覺掌握的不夠扎實(shí)，時(shí)而需要查閱一下知識(shí)點(diǎn)。我想，一方面跟缺少科班出身式的系統(tǒng)學(xué)習(xí)有關(guān)，另一方面也苦于一直未尋覓到一套合我胃口教程。直到我讀到了王福朋css知多少系列文章，使我有了重新系統(tǒng)學(xué)習(xí)css的想法。 本系列文章（重拾css）...

    li21 評(píng)論0 收藏0

  • 重拾css(2)——帶著問題出發(fā)

    摘要：來不及解釋，快上車有些瀏覽器不完全支持，現(xiàn)在可以用哪個(gè)工具去檢測(cè)瀏覽器是否支持，以及支持哪些項(xiàng)常用的標(biāo)簽，它們的屬性一般默認(rèn)為和。的設(shè)計(jì)初衷是什么具有包裹性例如和兩者的寬度是不一樣的，不信可以為加上背景色試試。 來不及解釋，快上車... ... 有些瀏覽器不完全支持css3，現(xiàn)在可以用哪個(gè)工具去檢測(cè)瀏覽器是否支持，以及支持哪些項(xiàng)？ 常用的html標(biāo)簽，它們的display屬性一般默認(rèn)...

    Big_fat_cat 評(píng)論0 收藏0

  • 重拾css(10)——display

    摘要：瀏覽器默認(rèn)樣式中規(guī)定了元素哪些屬于塊剩下的就是流。上圖可知，針對(duì)的標(biāo)簽，你設(shè)置寬度和高度是無效的，通過監(jiān)控可以知道，該元素實(shí)際的寬度和高度都是，并不是我們?cè)O(shè)定的值。因此，的特點(diǎn)可以總結(jié)為外部看來是流，但是自身卻是一個(gè)塊。 1.引言 html元素，除了塊就是流（即平時(shí)常說的塊級(jí)元素和行內(nèi)元素），而且流都包含在塊中，例如body就是一個(gè)塊，而a就是一個(gè)流。瀏覽器默認(rèn)樣式中規(guī)定了html元素...

    dendoink 評(píng)論0 收藏0

  • CSS魔法堂：重拾Border之——不僅僅是圓角

    摘要：擼代碼實(shí)現(xiàn)首頁(yè)檢驗(yàn)單查詢成品通用標(biāo)準(zhǔn)審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對(duì)角線，將作為邊的相交點(diǎn)。 前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right...

    _Dreams 評(píng)論0 收藏0

  • 重拾css(11)——position

    摘要：和不同，其他三個(gè)元素的位置重新排列了。只要元素會(huì)脫離文檔結(jié)構(gòu)，它就會(huì)產(chǎn)生破壞性，導(dǎo)致父元素坍塌。的絕對(duì)定位元素的定位永遠(yuǎn)是相對(duì)于瀏覽器邊界的，和其他元素沒有關(guān)系。 1.引言 在學(xué)習(xí)position之前，我們應(yīng)該去思考一個(gè)問題：什么情況下我們需要定位？如果沒有定位將無法滿足我們?cè)鯓拥男枨?？我們要知道，被人類?chuàng)造出來的每一個(gè)知識(shí)，都有它的用途，都要解決一些之前遇到的問題。 如果沒有定位，我...

    劉明 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

CollinPeng

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<