亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

深入理解css之float

Nekron / 1262人閱讀

摘要：破壞文檔流這是最本質(zhì)的特性，因此設(shè)計(jì)的初衷就是破壞文檔流。但是也有一種情況是，浮動(dòng)元素前后并沒(méi)有內(nèi)聯(lián)元素，因此也就不存在行框盒子，這時(shí)候就是浮動(dòng)錨點(diǎn)在起作用。

前言

在css中，是存在流的概念的。在正常情況下，頁(yè)面總是從左到右，從上到下布局，這種被稱(chēng)為正常的流。但是有很多情況，正常流是沒(méi)辦法實(shí)現(xiàn)的，因此我們需要一些手段來(lái)破壞流，從而實(shí)現(xiàn)一些特殊的布局，而本節(jié)的主角float就具備破壞流的特性。

float設(shè)計(jì)的初衷

很多新手在布局的時(shí)候，總喜歡用float來(lái)實(shí)現(xiàn)。例如一個(gè)三欄布局，左右固定，中間自適應(yīng)，有些人會(huì)通過(guò)float來(lái)一列一列把它們砌起來(lái)。這樣的布局極其容易崩潰，只要高度或者寬度稍微有些變化，整個(gè)頁(yè)面都會(huì)錯(cuò)亂。因此float設(shè)計(jì)的初衷并不是用來(lái)布局的，其本意僅僅是實(shí)現(xiàn)圖片文字環(huán)繞效果，即圖片左浮動(dòng)，文字環(huán)繞圖片，如下圖所示：

.float {
    width: 150px;
    float: left;
}
.content {
    width: 400px;
}


    
    
文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞
float的特性

一個(gè)元素設(shè)置了float屬性，會(huì)表現(xiàn)出如下特性：

包裹性

塊狀格式化上下文

破壞文檔流

沒(méi)有margin合并

包裹性

包裹性包含了包裹和自適應(yīng)兩個(gè)特性。

包裹指的是一個(gè)浮動(dòng)元素，如果子元素寬度足夠小，則浮動(dòng)元素的寬度就是該子元素的寬度，如下所示：

.float {
    float: left;
}


    這是浮動(dòng)元素的子元素

自適應(yīng)指的是如果浮動(dòng)元素的父元素有設(shè)置寬度，并且浮動(dòng)元素的子元素寬度超出了父元素，則浮動(dòng)元素的寬度最終表現(xiàn)為父元素的寬度，如下所示：

.father {
    width: 100px;
}

.float {
    float: left;
}


    

        這是浮動(dòng)元素的子元素
塊狀格式化上下文

設(shè)定了float的元素，其display的最終值會(huì)表現(xiàn)為block或者table，具體轉(zhuǎn)換如下表：

設(shè)定值 計(jì)算值
inline block
inline-block block
inline-table table
table-row block
table-row-group block
table-column block
table-column-group block
table-cell block
table-caption block
table-header-group block
table-footer-group block

因此，設(shè)置了float的元素，下面的寫(xiě)法是多余的：

    .float {
        float: left:
        display: block;
    }

    .float {
        float: left;
        vertical-align: middle; /* 不起作用 */
    }

格式化上下文屬于BFC的內(nèi)容，此處先不展開(kāi)。

破壞文檔流

這是float最本質(zhì)的特性，因此float設(shè)計(jì)的初衷就是破壞文檔流。設(shè)置float的元素，會(huì)導(dǎo)致父元素高度塌陷，我們來(lái)看個(gè)例子：

.float {
    float: left;
}


    




    文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞

可以看到，父元素的高度為0，但這不是bug，而是float本身就是這樣設(shè)計(jì)的，因此只有讓父元素高度塌陷了，后面的元素才有機(jī)會(huì)浮上來(lái)。但是僅僅是這樣還是不可以形成圖片環(huán)繞效果的，不然文字浮上來(lái)就只會(huì)覆蓋在圖片上面。這里面還隱藏著一個(gè)特性：

行框盒子和浮動(dòng)元素的不可重疊性

意思是說(shuō)行框盒子和浮動(dòng)元素不會(huì)發(fā)生重疊，因此，下面的文字浮上去之后才不會(huì)覆蓋在圖片之上。即使我們給文字設(shè)置margin負(fù)值也不會(huì)起作用。

沒(méi)有margin合并

設(shè)置了float的元素，由于形成了BFC，因此也就沒(méi)有了margin合并。

float作用機(jī)制

我們先來(lái)看個(gè)例子：

.float {
    float: right;
}


    標(biāo)題
    鏈接

在標(biāo)準(zhǔn)瀏覽器下，“標(biāo)題”和“鏈接”會(huì)在同一行展示，并且“鏈接”會(huì)浮動(dòng)在右邊。但是如果“標(biāo)題”非常長(zhǎng)，一行放不下呢，“鏈接”是浮動(dòng)在第一行還是第二行呢？答案是第二行，要想解釋這個(gè)，我們得先理解兩個(gè)概念，一個(gè)是“浮動(dòng)錨點(diǎn)”，一個(gè)是“浮動(dòng)參考”：

浮動(dòng)錨點(diǎn)是float元素所在的“流”中的一個(gè)點(diǎn)，這個(gè)點(diǎn)本身并不浮動(dòng)，表現(xiàn)得就像是一個(gè)沒(méi)有margin、padding和border的空的內(nèi)聯(lián)元素。

浮動(dòng)參考指的是浮動(dòng)元素對(duì)齊參考的實(shí)體。

float元素的“浮動(dòng)參考”是行框盒子，也就是float元素在當(dāng)前“行框盒子”內(nèi)定位，因此，上面的例子“鏈接”會(huì)在第二行展示。但是也有一種情況是，浮動(dòng)元素前后并沒(méi)有內(nèi)聯(lián)元素，因此也就不存在行框盒子，這時(shí)候就是“浮動(dòng)錨點(diǎn)”在起作用。因?yàn)椤案?dòng)錨點(diǎn)”表現(xiàn)得像一個(gè)內(nèi)聯(lián)元素，有內(nèi)聯(lián)元素，自然就有行框盒子，只是這個(gè)盒子看不見(jiàn)也摸不著罷了。

float實(shí)現(xiàn)流體布局

前面文字環(huán)繞的例子，只要稍微改造一下就可以實(shí)現(xiàn)兩欄或多欄的自適應(yīng)布局，代碼如下：

.father {
    overflow: hidden;
    height: 200px;
}

.float {
    float: left;
    width: 100px;
}

.content {
    margin-left: 120px;
}


    
    
文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞
總結(jié)

float設(shè)計(jì)的初衷不是布局，而是文字環(huán)繞效果

float的特性：包裹性、塊狀格式化上下文、破壞性、沒(méi)有margin合并

float的機(jī)制：浮動(dòng)錨點(diǎn)和浮動(dòng)參考

float實(shí)現(xiàn)自適應(yīng)布局的思路

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

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

相關(guān)文章

  • 【學(xué)習(xí)筆記】CSS深入理解之float

    摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)，元素周?chē)膬?nèi)容轉(zhuǎn)換為圍繞元素排列。從浮動(dòng)的起因和浮動(dòng)的實(shí)現(xiàn)后果來(lái)看，浮動(dòng)不適合用于大范圍的布局，更適合利用其特性實(shí)現(xiàn)一些小范圍的流體布局效果。 張?chǎng)涡竦腃SS深入理解之float浮動(dòng)學(xué)習(xí)筆記 float的歷史 float為產(chǎn)生文字環(huán)繞效果而生 float的特性 — 包裹和破壞 包裹：即產(chǎn)生一個(gè)BFC破壞：使父容器...

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

  • 深入理解css之BFC

    摘要：屬性，會(huì)破壞文檔流，與非定位元素很難結(jié)合起來(lái)用，因此也不適合自適應(yīng)布局。，其對(duì)無(wú)感，無(wú)法自適應(yīng)剩余瀏覽器空間?？偨Y(jié)的定義，就如同結(jié)界一樣，完全封閉對(duì)外無(wú)任何影響。引起的各種屬性與自適應(yīng)布局自適應(yīng)布局與屬性說(shuō)明 BFC的定義 BFC的全稱(chēng)是block formatting context（塊狀格式化上下文），當(dāng)BFC起作用的時(shí)候，其元素內(nèi)部無(wú)論怎么翻江倒海都不會(huì)影響到外部元素，同樣，外部...

    姘擱『 評(píng)論0 收藏0

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

    摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對(duì)屬性的解釋是元素盒子的邊不能和前面的浮動(dòng)元素相鄰。清除高度塌陷的問(wèn)題在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問(wèn)題。 float屬性是CSS中常用的一個(gè)屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會(huì)出現(xiàn)意料之外的效果。雖然很多人說(shuō)浮動(dòng)會(huì)用就行、浮動(dòng)過(guò)時(shí)了，但是對(duì)于優(yōu)秀的前端開(kāi)發(fā)人員，需要有刨根問(wèn)底的精神，...

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

  • 【前端Talkking】CSS系列——CSS深入理解之relative定位

    摘要：前言在前面的兩篇文章深入理解之浮動(dòng)和深入理解之定位中，介紹了和的特性和使用方法，如果大家仔細(xì)閱讀完了這兩篇文章，相信你的打怪技能又提高的一大截，那么趁著自己最近狀態(tài)不錯(cuò)，就多給大家分享點(diǎn)自己平時(shí)所學(xué)的技能。 1.前言 在前面的兩篇文章：CSS深入理解之float浮動(dòng)和CSS深入理解之a(chǎn)bsolute定位中，介紹了float和absolute的特性和使用方法，如果大家仔細(xì)閱讀完了這兩篇文...

    魏憲會(huì) 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之absolute

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記絕對(duì)定位的特性絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。利用絕對(duì)定位元素脫離文檔流的特性，使用動(dòng)畫(huà)可以避免大范圍的回流和重繪。絕對(duì)定位元素拉伸實(shí)現(xiàn)寬高自適應(yīng)，可應(yīng)用于大范圍的布局。 《張?chǎng)涡竦腃SS深入理解之a(chǎn)bsolute》學(xué)習(xí)筆記 絕對(duì)定位的特性 絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。浮動(dòng)的一些應(yīng)用場(chǎng)景中也可用絕對(duì)定位替代 絕對(duì)定位的行為表現(xiàn) 無(wú)依賴(lài)絕對(duì)...

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

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

0條評(píng)論

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