「CSS」1分鐘了解經典樣式-浮動

動元素添加了flow屬性，會被移出正常文檔流，并被拉到文檔的邊緣，文檔流重新排列并包圍它所在的空間。在報紙和雜志很常見，所以css增加了浮動來實現這種效果，這是浮動設計的初衷。

浮動本身并不是為了實現布局而設計的，但在近20年時間里被當成布局工具。是因為那個年代它是唯一的選擇，flexbox和網格布局近幾年才出現。

浮動元素不同于普通文檔流元素，它們的高度不會添加到父元素。容器折疊是指父容器并沒有包含到浮動的容器，因為浮動的元素高度不會加到父容器上。

如何解決容器折疊的問題

使用和浮動float配套的clear屬性。將一個元素放置到父容器的末尾，并對它使用clear: both，元素將移動到浮動元素的下面，而不是側面。容器就會擴展包含它。更加優雅的做法，是使用偽元素。這一做法稱為清除浮動。

.clear::after { // 選中容器末尾的偽元素
content: ' '
clear: both // 清除浮動
display: block // display非inline，clear只對塊級元素生效，加上content屬性，使得偽元素出現在文檔中
}

浮動元素的外邊距不會折疊到容器外，而非浮動元素外邊距則會折疊。為了包含所有外邊距，清除浮動修改版如下。

.clear::after,
.clear::before { // 選中容器開始和末尾的偽元素
content: ' '
display: table // table可以包含外邊距
}
.clear::after { // 只有末尾需要清除浮動
clear: both // 清除浮動
}

有一種典型網頁布局，左邊是圖片，右邊是文字，稱為媒體對象模式。實現方案有很多種，可以用flexbox和網格布局等，這里講下如何用浮動實現。

對圖片設置浮動到左邊，右邊文字會圍繞圖片，可能會到圖片的底下。但是我們預期是文字在圖片右側排列，不會到圖片底部。

使用塊級格式化上下文（block formatting context, BFC）解決。BFC里面的內容不會和外部元素重疊或相互影響。添加如下元素可以創建

●float: left, right，不為none即可

●overflow: auto, hidden, scroll，不為visible即可

●display: inline-block, table-cell, flex, grid。有這些屬性的元素是塊級容器

●position: absolute或fixed

通常采取設置overflow: hidden或auto，是創建BFC最簡單的方式。

以上就是今天和大家分享的浮動核心知識，希望能讓你更好的理解界面樣式。喜歡的朋友可以點贊，關注加收藏，互相學習，共同成長！

節課介紹CSS的浮動。

標準流

標簽按照規定好的默認方式排序
塊級元素獨占一行 從上向下順序排列
div hr p h1-h6 ul ol form table

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 300px;
            background-color: #c5708b;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

為什么需要浮動嘞?

很多的布局效果,標準流沒有辦法完成,就需要利用到浮動完成布局.

浮動可以改變元素標簽默認的排列方式

網頁布局第一準則:

多個塊級元素縱向排列找標準流

多個塊級元素橫向排列找浮動

? 什么是浮動??

float 屬性用于創建浮動框
將其移動到一邊,直到左邊緣或者右邊緣及包含塊或者另一個浮動框的邊緣

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            /* left 左浮動 right 右浮動 none 不浮動(默認) */
            float: left;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

浮動特性

1.脫離標準普通流的控制移動到指定位置脫標

2.浮動的盒子不再保留原先的位置

3.多個盒子都設置浮動,按照屬性值一行并排頂端對齊排列(不會有縫隙,多出另起一行對齊)

4.浮動元素會具有行內塊元素特性(任何元素都可浮動)

如果塊級盒子沒有設置寬度,默認寬度和父級一樣寬,添加浮動后,大小由內容決定
行內元素同理

5.浮動的盒子只會影響浮動盒子后面的標準流,不會影響前面的標準流

實戰小技巧

為了約束浮動元素位置,網頁布局一般采用的策略:先用標準流的父元素排列上下位置,之后內部子元素采取浮動排列左右位置

清除浮動

為什么要清除浮動?

由于父級盒子很多情況下,不方便給高度,但是的盒子浮動又不占位置,最后父級盒子高度為0時,就會影響下面的標準流盒子.

1.父級沒有高度

2.子盒子浮動了

3.影響下面布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid #000;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

清除浮動方法

清除浮動本質:

清除浮動元素脫離標準流造成的影響

清除浮動策略:

閉合浮動,只讓浮動在父盒子內影響,不影響父盒子外面的其他盒子

1. 父級添加overflow 屬性值設置hidden auto scroll

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

弊端:無法顯示溢出的部分

父盒子 500px 子盒子 600px (子盒子的100px被隱藏)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 600px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

2.:after 偽元素法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
        }

        div .child {
            color: bisque;
            width: 240px;
            background-color: #c5708b;
            float: left;
        }

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE 6,7專有 解決兼容性問題 */
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

3.雙偽元素清除浮動

在線咨詢

上一篇：13 個最受歡迎的技術寫作工具
下一篇：html+css帶你制作網頁水波特效

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商