CSS Float（浮动）
无浮动时，块级元素按照垂直方向排列
设置浮动后，块级元素按照水平方向向左或者向右排列
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
浮动属性
"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit |
1 |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit |
1 |
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
浮动实例代码
<style type="text/css">.box{
width: 100%;
overflow: hidden;
}
.box-default>div {}
.box-float>div {float:left}
.box>div {
margin: 5px;
width:120px;
height:120px;
border:1px solid gray;
}
.imgbox1 {
background: green;
}
.imgbox2 {
background: yellow;
}
</style>
<body>
<p>无浮动时，块级元素按照垂直方向排列</p>
<div class="box box-default">
<div class="imgbox1"> </div>
<div class="imgbox1"> </div>
</div>
<p>设置浮动后，块级元素按照水平方向向左或者向右排列</p>
<div class="box box-float">
<div class="imgbox1"> </div>
<div class="imgbox1"> </div>
</div>
</body>
相邻浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
在这里，我们对图片廊使用 float 属性：
不同元素浮动实例
<style>
.box>div {
float: left;margin: 5px;
width:120px;
height:120px;
border:1px solid gray;
background: green;
}
.box>img {
float: left;
}
</style>
<div class="box ">
<div class="imgbox1"> </div>
<img src="/uploads/2022/1/59a3b0fe-5090-4948-a188-c892361e33ef.gif">
</div>
清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性强制清除浮动
clear: left; 清除 float:left浮动
clear: right; 清除float: right浮动
clear: both; 取决于float浮动设置
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
clear效果展示
1. 这七个方块通过float浮动在一起
2. 在黄色方块应用clear:left
3. 在黄色方块应用clear:right
这里的浮动属性为float: right
4. 在黄色方块应用clear:both
浮动代码尝试
<style type="text/css">#box1 {
width: 100%;
overflow: hidden;
}
#box1>div{
margin: 3px;
width: 100px;
height: 100px;
background: green;
float: left;
}
#box1>div:nth-child(4){
background: yellow;
}
</style>
<body>
<div id="box1">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
讨论区