CSS利用浮動實現(xiàn)多個盒子并排

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

我要評論

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

浮動

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

注意事項：
（1）要浮動，并排的盒子都要設置浮動
（2）父盒子要有足夠的寬度，否則盒子會掉下去

浮動實現(xiàn)盒子并排

首先，繪制一個600px*600px（指的是內(nèi)容區(qū)域的大小）大小的盒子，大盒子里面容納三個大小都為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é)果：

此時三個盒子是垂直排列的，我們可以利用浮動來設置盒子的并排，三個子盒子的樣式都要設置浮動：

結(jié)果如下：

如果沒有三個子盒子都設置浮動，比如子盒子box2沒有設置浮動：

代碼：

結(jié)果：
沒有設置浮動的子盒子box2（藍色方塊）鉆到紅色方塊底下去了

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

要設置浮動，父盒子要設置足夠的寬度
比如：前面我們設置父盒子的寬度剛好可以容納三個子盒子，此時我們把父盒子的寬度改小一點：

結(jié)果：
box3盒子代表的方塊會因為父盒子的寬度不夠被擠到下面去，無法實現(xiàn)并排

浮動的順序貼靠特性

子盒子會按照順序進行貼靠，如果父盒子的寬度不夠，不足以實現(xiàn)子盒子的并排，那么子盒子會尋找前一個兄弟元素進行并排
如圖：父盒子因為寬度不夠，所以盒子3會沿著盒子2貼靠

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

例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é)果：