CSS浮動（float）

86051 閱讀 0 評論 0 點贊

一、傳統(tǒng)網(wǎng)頁布局的三種方式

網(wǎng)頁布局的本質(zhì)：用 CSS 來擺放盒子，把盒子擺放到相應(yīng)位置。

CSS 提供了三種傳統(tǒng)布局方式（簡單說就是盒子如何進行排列）。

（1）普通流（標準流）

（2）浮動

（3）定位

這里指的只是傳統(tǒng)布局，其實還有一些特殊高級的布局方式。

二、標準流（普通流/文檔流）

所謂的標準流：就是標簽按照規(guī)定好的默認方式排列。

（1）塊級元素會獨占一行，從上向下順序排列。

（2）行內(nèi)元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。

以上都是標準流布局，我們前面學(xué)習(xí)的就是標準流，標準流是最基本的布局方式。

這三種布局方式都是用來擺放盒子的，盒子擺放到合適位置，布局自然就完成了。

注意：實際開發(fā)中，一個頁面基本都包含了這三種布局方式（后面移動端學(xué)習(xí)新的布局方式）。

三、為什么需要浮動？

提問：我們用標準流能很方便的實現(xiàn)如下效果嗎？

1. 如何讓多個塊級盒子（div）水平排列成一行？

多個塊級盒子（div）水平排列成一行

雖然轉(zhuǎn)換為行內(nèi)塊元素可以實現(xiàn)一行顯示，但是他們之間會有大的空白縫隙，很難控制。

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行內(nèi)塊中間有縫隙</title>
    <style>
        div {
            width: 150px;
            height: 200px;
            background-color: #d87093;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

</html>

運行結(jié)果：

行內(nèi)塊元素

2. 如何實現(xiàn)兩個盒子的左右對齊？

有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局。因為浮動可以改變元素標簽?zāi)J的排列方式。

浮動最典型的應(yīng)用：可以讓多個塊級元素一行內(nèi)排列顯示。

網(wǎng)頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動！

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多個塊級元素橫向排列找浮動</title>
    <style>
        div {
            float: left;
            width: 150px;
            height: 200px;
            background-color: #d87093;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

</html>

運行結(jié)果：

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

四、什么是浮動？

float 屬性用于創(chuàng)建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。

語法：

選擇器 { float: 屬性值;}

屬性	描述
none	元素不浮動（默認值）
left	元素向左浮動
right	元素向右浮動

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浮動的標簽  頂對齊 */
        /* 浮動: 在一行排列, 寬高生效 -- 浮動后的標簽具備行內(nèi)塊特點 */
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;

            float: left;

            margin-top: 50px;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: skyblue;

            float: left;

            /* 因為有浮動, 不能生效 - 盒子無法水平居中 */
            margin: 0 auto;
        }

        .three {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</body>
</html>

運行結(jié)果：