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>

结果：
在这里插入图片描述