CSS利用浮動(dòng)實(shí)現(xiàn)多個(gè)盒子并排

發(fā)布時(shí)間：2023-11-29 16:31:36 作者：十八只兔

CSS 中盒子并列是指在同一行或同一列中,將多個(gè)盒子按照一定的規(guī)則排列在一起的布局方式，本文主要介紹了CSS利用浮動(dòng)實(shí)現(xiàn)多個(gè)盒子并排，感興趣的可以了解一下

浮動(dòng)

浮動(dòng)：
浮動(dòng)(float)是css樣式的一個(gè)定位屬性，可以使元素脫離正常文檔流并浮動(dòng)在它父容器的左側(cè)或者右側(cè)。
float設(shè)置元素在水平浮動(dòng)，意味著只能左右浮動(dòng)而不能上下浮動(dòng)。

注意事項(xiàng)：
（1）要浮動(dòng)，并排的盒子都要設(shè)置浮動(dòng)
（2）父盒子要有足夠的寬度，否則盒子會(huì)掉下去

浮動(dòng)實(shí)現(xiàn)盒子并排

首先，繪制一個(gè)600px*600px（指的是內(nèi)容區(qū)域的大小）大小的盒子，大盒子里面容納三個(gè)大小都為200px *200px但背景顏色不同的盒子：

代碼：

<!DOCTYPE html>
<html lang="en">
<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>
        .main{
            width: 600px;
            height: 600px;
            border: 2px gray solid ;
        }
        .main .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .main .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .main .box3{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

結(jié)果：

此時(shí)三個(gè)盒子是垂直排列的，我們可以利用浮動(dòng)來(lái)設(shè)置盒子的并排，三個(gè)子盒子的樣式都要設(shè)置浮動(dòng)：

結(jié)果如下：

如果沒(méi)有三個(gè)子盒子都設(shè)置浮動(dòng)，比如子盒子box2沒(méi)有設(shè)置浮動(dòng)：

代碼：

結(jié)果：
沒(méi)有設(shè)置浮動(dòng)的子盒子box2（藍(lán)色方塊）鉆到紅色方塊底下去了

按住F12可以出現(xiàn)下面的控制臺(tái)：
把鼠標(biāo)挪到box2的代碼，可以發(fā)現(xiàn)box2代表的盒子鉆到box1下面去了

要設(shè)置浮動(dòng)，父盒子要設(shè)置足夠的寬度
比如：前面我們?cè)O(shè)置父盒子的寬度剛好可以容納三個(gè)子盒子，此時(shí)我們把父盒子的寬度改小一點(diǎn)：

結(jié)果：
box3盒子代表的方塊會(huì)因?yàn)楦负凶拥膶挾炔粔虮粩D到下面去，無(wú)法實(shí)現(xiàn)并排

浮動(dòng)的順序貼靠特性

子盒子會(huì)按照順序進(jìn)行貼靠，如果父盒子的寬度不夠，不足以實(shí)現(xiàn)子盒子的并排，那么子盒子會(huì)尋找前一個(gè)兄弟元素進(jìn)行并排
如圖：父盒子因?yàn)閷挾炔粔?，所以盒?會(huì)沿著盒子2貼靠

如果盒子2沒(méi)有足夠的空間，那么盒子3會(huì)試著沿盒子1貼靠，如果盒子1空間不夠，那么盒子3會(huì)沿著父盒子的邊框貼靠，以此類推。

例1：

<!DOCTYPE html>
<html lang="en">
<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>
        .main{
            width: 600px;
            height: 600px;
            border: 2px gray solid ;
        }

        .main .box1{
            width: 300px;
            height: 600px;
            background-color: red;
            float: left;
        }

        .main .box2{
            width: 300px;
            height: 200px;
            background-color: blue;
            float: left;
        }

        .main .box3{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }

    </style>
</head>

<body>

    <div class="main">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    
</body>
</html>

結(jié)果：

例2：

代碼：

結(jié)果：
由于盒子2（藍(lán)色方塊）空間不夠，所以盒子3（橙色方塊）會(huì)沿著盒子1貼靠

浮動(dòng)的元素能設(shè)置寬高

浮動(dòng)的元素不再區(qū)分塊級(jí)元素、行內(nèi)元素，因?yàn)楦?dòng)元素已經(jīng)脫離了標(biāo)準(zhǔn)文檔流，所以能夠設(shè)置寬度和高度，即使是span標(biāo)簽或a標(biāo)簽這樣的標(biāo)簽也能設(shè)置寬高。
以span標(biāo)簽為例，沒(méi)有設(shè)置浮動(dòng)的span標(biāo)簽本身是不能設(shè)置寬高的：