国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入理解css之float

Nekron / 1190人閱讀

摘要：破壞文檔流這是最本質的特性，因此設計的初衷就是破壞文檔流。但是也有一種情況是，浮動元素前后并沒有內聯元素，因此也就不存在行框盒子，這時候就是浮動錨點在起作用。

前言

在css中，是存在流的概念的。在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。但是有很多情況，正常流是沒辦法實現的，因此我們需要一些手段來破壞流，從而實現一些特殊的布局，而本節的主角float就具備破壞流的特性。

float設計的初衷

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

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


    
    
文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞
float的特性

一個元素設置了float屬性，會表現出如下特性：

包裹性

塊狀格式化上下文

破壞文檔流

沒有margin合并

包裹性

包裹性包含了包裹和自適應兩個特性。

包裹指的是一個浮動元素，如果子元素寬度足夠小，則浮動元素的寬度就是該子元素的寬度，如下所示：

.float {
    float: left;
}


    這是浮動元素的子元素

自適應指的是如果浮動元素的父元素有設置寬度，并且浮動元素的子元素寬度超出了父元素，則浮動元素的寬度最終表現為父元素的寬度，如下所示：

.father {
    width: 100px;
}

.float {
    float: left;
}


    

        這是浮動元素的子元素
塊狀格式化上下文

設定了float的元素，其display的最終值會表現為block或者table，具體轉換如下表：

設定值 計算值
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

因此，設置了float的元素，下面的寫法是多余的：

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

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

格式化上下文屬于BFC的內容，此處先不展開。

破壞文檔流

這是float最本質的特性，因此float設計的初衷就是破壞文檔流。設置float的元素，會導致父元素高度塌陷，我們來看個例子：

.float {
    float: left;
}


    




    文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞

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

行框盒子和浮動元素的不可重疊性

意思是說行框盒子和浮動元素不會發生重疊，因此，下面的文字浮上去之后才不會覆蓋在圖片之上。即使我們給文字設置margin負值也不會起作用。

沒有margin合并

設置了float的元素，由于形成了BFC，因此也就沒有了margin合并。

float作用機制

我們先來看個例子：

.float {
    float: right;
}


    標題
    鏈接

在標準瀏覽器下，“標題”和“鏈接”會在同一行展示，并且“鏈接”會浮動在右邊。但是如果“標題”非常長，一行放不下呢，“鏈接”是浮動在第一行還是第二行呢？答案是第二行，要想解釋這個，我們得先理解兩個概念，一個是“浮動錨點”，一個是“浮動參考”：

浮動錨點是float元素所在的“流”中的一個點，這個點本身并不浮動，表現得就像是一個沒有margin、padding和border的空的內聯元素。

浮動參考指的是浮動元素對齊參考的實體。

float元素的“浮動參考”是行框盒子，也就是float元素在當前“行框盒子”內定位，因此，上面的例子“鏈接”會在第二行展示。但是也有一種情況是，浮動元素前后并沒有內聯元素，因此也就不存在行框盒子，這時候就是“浮動錨點”在起作用。因為“浮動錨點”表現得像一個內聯元素，有內聯元素，自然就有行框盒子，只是這個盒子看不見也摸不著罷了。

float實現流體布局

前面文字環繞的例子，只要稍微改造一下就可以實現兩欄或多欄的自適應布局，代碼如下：

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

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

.content {
    margin-left: 120px;
}


    
    
文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞
總結

float設計的初衷不是布局，而是文字環繞效果

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

float的機制：浮動錨點和浮動參考

float實現自適應布局的思路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113775.html

相關文章

  • 【學習筆記】CSS深入理解之float

    摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內容轉換為圍繞元素排列。從浮動的起因和浮動的實現后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實現一些小范圍的流體布局效果。 張鑫旭的CSS深入理解之float浮動學習筆記 float的歷史 float為產生文字環繞效果而生 float的特性 — 包裹和破壞 包裹：即產生一個BFC破壞：使父容器...

    denson 評論0 收藏0

  • 深入理解css之BFC

    摘要：屬性，會破壞文檔流，與非定位元素很難結合起來用，因此也不適合自適應布局。，其對無感，無法自適應剩余瀏覽器空間。總結的定義，就如同結界一樣，完全封閉對外無任何影響。引起的各種屬性與自適應布局自適應布局與屬性說明 BFC的定義 BFC的全稱是block formatting context（塊狀格式化上下文），當BFC起作用的時候，其元素內部無論怎么翻江倒海都不會影響到外部元素，同樣，外部...

    姘擱『 評論0 收藏0

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動

    摘要：包裹性所謂包裹性，其實是由包裹和自適應兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節中，如果子元素設置浮動屬性，則父元素就會出現高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當就會出現意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優秀的前端開發人員，需要有刨根問底的精神，...

    yankeys 評論0 收藏0

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

    摘要：前言在前面的兩篇文章深入理解之浮動和深入理解之定位中，介紹了和的特性和使用方法，如果大家仔細閱讀完了這兩篇文章，相信你的打怪技能又提高的一大截，那么趁著自己最近狀態不錯，就多給大家分享點自己平時所學的技能。 1.前言 在前面的兩篇文章：CSS深入理解之float浮動和CSS深入理解之absolute定位中，介紹了float和absolute的特性和使用方法，如果大家仔細閱讀完了這兩篇文...

    魏憲會 評論0 收藏0

  • 【學習筆記】CSS深入理解之absolute

    摘要：張鑫旭的深入理解之學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現寬高自適應，可應用于大范圍的布局。 《張鑫旭的CSS深入理解之absolute》學習筆記 絕對定位的特性 絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應用場景中也可用絕對定位替代 絕對定位的行為表現 無依賴絕對...

    Anleb 評論0 收藏0

發表評論

0條評論

Nekron

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<