浮動的一些探究

時間  2019-11-07
標籤 浮動 一些 探究 简体版
原文   原文鏈接

內容預覽

  1. 包含塊css

  2. 浮動元素的特性html

  3. 浮動元素的擺放規則segmentfault

  4. 浮動元素的幾種行爲佈局

  5. 清除浮動spa

1、包含塊

全部元素的佈局都是依賴於包含塊的。3d

舉個例子來講code

<body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>

div.child的包含塊就是div.parent，也就是說div.child位置的擺放是依賴於div.parent。div.parent的包含塊就是body。htm

一句話總結：浮動元素的包含塊定義爲最近的塊級祖先元素。blog

那麼body的包含塊html的包含塊是誰呢？爲了方便閱讀，這個問題將在下次的文章中介紹。ip

2、浮動元素的特性

爲了便於閱讀，請先了解行內元素的相關概念以及外邊距合併的原理。

  1. 浮動元素會從文檔的正常流(簡稱文檔流）中脫離，但仍會影響佈局。
    正常流（文檔流）：這是指西方語言文本從左到右，從上到下顯示。簡單來講就是一種自上而下自左而右到一種閱讀方式

  2. 浮動元素的外邊距不會合並

  3. 若是確實要浮動一個非替換元素，則必須爲該元素聲明一個width，不然根據CSS規範，元素寬度趨於0

舉個例子：

<body>
    <div></div>
</body>

clipboard.png

如今對代碼進行修改，給div加個浮動

<body>
    <div style="float:left;"></div>
</body>

clipboard.png

3、浮動元素的擺放規則

1）浮動元素的左（或右）外邊界不能超出其包含塊的左（或右）內邊界。

這裏的左（或右）是指浮動方向。

<div class="wrap" style="width:400px;height:200px;border:1px solid;">
    <div class="box" style="float:left;width:100px;height:100px;background-color:red;">
    </div>
</div>

clipboard.png

2）浮動元素的左（或右）外邊界必須是源文檔中以前出現的左浮動（或右浮動）元素的左（右）邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下面。

該規則主要針對多個浮動元素，而且防止它們發生覆蓋。

<style type="text/css">
    div{width:100px;height:100px;}
    .wrap{width:400px;height:200px;border:1px solid;}
    .box0{background-color:red;}
    .box1{background-color:blue;}
    .box2{background-color:green;}
    .fl{float:left;}
    .special{width:300px;height:100px;background:gray;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="box0 fl"></div>
        <div class="box1 fl"></div>
        <div class="box2 fl"></div>
        <div class="special fl"></div>
    </div>
</body>

clipboard.png

3）左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。一個右浮動元素的左外邊界不會在其左邊任何左浮動元素的右外邊界的左邊。這條規則比較繞，我的理解就是多個子元素一塊兒浮動時，在有限的寬度裏不會發生重疊。

<style type="text/css">
    div{width:300px;height:100px;}
    .wrap{width:400px;height:200px;border:1px solid;}
    .box0{background-color:red;}
    .box1{background-color:blue;}
    .fl{float:left;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="box0 fl"></div>
        <div class="box1 fl"></div>
    </div>
</body>

clipboard.png

123總結：通常狀況下，浮動元素不會發生重疊或覆蓋，水平方向上也不會超出父元素邊界。

4）一個浮動元素的頂端不能比其父元素的內頂端更高。若是一個浮動元素在兩個合併外邊距之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素。

內頂端在這裏的意思就是content的頂部。也就是下圖箭頭所指藍色區域的頂端。

clipboard.png

<style type="text/css">
    .wrap{width:200px;height:200px;border:1px solid;padding:20px;}
    .child{width:50px;height:50px;float:right;background-color:red;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="child">
            
        </div>
    </div>
</body>

那麼這條規則的第一句話意思就是浮動元素的頂端不會比父元素的content區頂端高。

第二句話不太好理解，先看段代碼。

<style type="text/css">
div{margin:8px 0;}
</style>
</head>
<body>
    <div>First</div>
    <div style="float:left">Float Div</div>
    <div>Last Div</div>
</body>

效果是這樣的。

clipboard.pngclipboard.png
clipboard.png

第二句話的意思我的理解爲：元素浮動後外邊距再也不合並，而LastDiv依然處在正常流中（會與First發生合併）,因此出現FloatDiv低於LastDiv現象。

5）浮動元素的頂端不能比以前全部浮動元素或塊級元素的頂端更高。

這條規則比較好理解。注意這裏的浮動元素和塊級元素都是同級別的。

6）若是源文檔中一個浮動元素以前出現另外一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。

一張圖理解該規則

clipboard.png
紅色區域是浮動元素所在行的行框

456總結：這三條規則以遞進的方式來描述浮動元素在垂直向上方向的位置擺放問題。分別介紹浮動元素與包含塊的位置關係，浮動元素與同級元素的位置關係以及浮動元素與其所在行框的位置關係。

4、浮動元素的幾種行爲

1. 高度太高

高度超出包含塊的高度時會發生什麼？常說的高度塌陷就是這裏產生的。

clipboard.png

在前面的規則中並無對該狀況進行處理。

CSS2.1 中對此行爲進行了說明，浮動元素會延伸，從而包含其全部後代浮動元素。因此經過將父元素設爲浮動元素，就能夠把浮動元素包含在其父元素內。

<style type="text/css">
    .wrap{border:1px solid;float:left;}
    .child{width:100px;height:300px;background:red;float:left;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="child"></div>
        The content <strong>after</strong> float element.The content <strong>after</strong> float element.The content <strong>after</strong> float element.The content <strong>after</strong> float element.The content <strong>after</strong> float element.The content <strong>after</strong> float element.
    </div>
</body>

clipboard.png

2. 負外邊距

浮動元素的規則對浮動元素在水平以及垂直朝上方向的位置擺放進行了嚴格限制。然而，當margin設爲負值時，確實超出了包含塊的邊界。

稍加修改樣式

.child{width:100px;height:300px;background:red;float:left;margin:-50px 0 0 -50px;}
body{padding:50px;}

clipboard.png

3. 浮動元素過寬

浮動元素過寬時，此時會哪邊會超出包含塊邊界，則是由浮動方向決定了。由於規則1裏說的浮動元素的左（或右）邊界（浮動方向）不會超過包含塊的左（或右）邊界。

a.向左浮動時

clipboard.png

b.向右浮動時

clipboard.png

4.浮動元素與其餘元素的重疊

a）行內元素

行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素「之上」顯示。

b）塊級元素

塊框與一個浮動元素重疊時，其邊框和背景都在該浮動元素「之下」顯示，而內容在浮動元素「之上」顯示。

<style type="text/css">
        .box{width:200px;height:200px;background-color:#af3;float:left;margin-right:-30px;}
        span{border:1px solid;background-color:#3fa;}
        p{border:1px solid;background-color:#f3a;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
        <span>This is inline element</span>
        <p>This is block element</p>
    </div>
</body>

clipboard.png

一圖勝千言。

5、清除浮動

CSS1和CSS2中對clear工做是這樣描述的：增長元素的上外邊距，使之最後落在浮動元素的下面。這也就是說清除元素的上外邊距可能會調整。

CSS2.1中，引進了一個清除區域（clearance）。清除區域時在元素的上外邊距增長的額外間隔，不容許任何浮動元素進入這個範圍內。這意味着在給元素設置clear時，它的外邊距並不改變。之因此發生下移是這個清除區域形成的。

這是未設置clear屬性時的效果。

<style type="text/css">
        .wrap{width:400px;height:200px;}
        div{width:100px;height:98px;border:1px solid;}
        div.fir{background-color:#af3;float:left;}
        div.sec{background-color:#3fa;width:300px;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="fir"></div>
        <div class="sec"></div>
    </div>
</body>

clipboard.png

給sec設置clear屬性時，是這樣的。紅色區域是清除區域。

div.sec{background-color:#3fa;width:300px;clear:left;}

clipboard.png

關於清除區域大小：我的理解這個區域的大小是不固定的，這個大小是由清除元素前面所要清除的浮動元素的大小來決定的。而且浮動元素和清除元素的方向是要保持一致的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程