CSS：利用浮动实现多个盒子并排_css 两个盒子并排_十八只兔的博客

浮动

浮动：
浮动 (float) 是 css 样式的一个定位属性，可以使元素脱离正常文档流并浮动在它父容器的左侧或者右侧。
float 设置元素在水平浮动，意味着只能左右浮动而不能上下浮动。
注意事项：
（1）要浮动，并排的盒子都要设置浮动
（2）父盒子要有足够的宽度，否则盒子会掉下去

浮动实现盒子并排

首先，绘制一个 600px*600px（指的是内容区域的大小）大小的盒子，大盒子里面容纳三个大小都为 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>

结果：

此时三个盒子是垂直排列的，我们可以利用浮动来设置盒子的并排，三个子盒子的样式都要设置浮动：

结果如下：
如果没有三个子盒子都设置浮动，比如子盒子 box2 没有设置浮动：

代码：

结果：
没有设置浮动的子盒子 box2（蓝色方块）钻到红色方块底下去了

按住 F12 可以出现下面的控制台：
把鼠标挪到 box2 的代码，可以发现 box2 代表的盒子钻到 box1 下面去了

要设置浮动，父盒子要设置足够的宽度
比如：前面我们设置父盒子的宽度刚好可以容纳三个子盒子，此时我们把父盒子的宽度改小一点：

结果：
box3 盒子代表的方块会因为父盒子的宽度不够被挤到下面去，无法实现并排

浮动的顺序贴靠特性

子盒子会按照顺序进行贴靠，如果父盒子的宽度不够，不足以实现子盒子的并排，那么子盒子会寻找前一个兄弟元素进行并排
如图：父盒子因为宽度不够，所以盒子 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>

结果：