1.float属性
在CSS中，任何元素都可以浮动，无论是块级元素还是行内元素，设置浮动后可以设置宽高（width,height）。
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
HTML5中的块级元素默认要独占一行，无论当前块元素的宽度是多少。
2.简单示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>float用法</title> <style> #container { border: 1px solid rgb(163, 163, 163); background-color: #ddd; width: 800px; } #block1 { border: 1px solid rgb(163, 163, 163); background-color: rgb(233, 142, 142); width: 200px; height: 150px; } #block2 { border: 1px solid rgb(163, 163, 163); background-color: rgb(145, 233, 142); width: 300px; height: 180px; } #block3 { border: 1px solid rgb(163, 163, 163); background-color: rgb(241, 94, 241); width: 260px; height: 120px; } </style> </head> <body> <div id="container"> <div id="block1">block1</div> <div id="block2">block2</div> </div> <div id="block3">block3</div> </body> </html>
效果图
（1）container块没有设置高度
（2）block1块和block2放置于container块中，block3块置于container块之外。
2.1设置第一个块block1浮动
#block1 { border:1px solid rgb(163, 163, 163); background-color: rgb(233, 142, 142); width: 200px; height: 150px; /* 浮动到左边 */ float: left; }
效果图：
block1块脱离文档流浮动到父容器container的左上角，block2块和block3块默认向上移动到原来block1位置，显示出来的效果就是block1盖住了block2。大概是下图这个意思吧。
2.2设置block1浮动到左边，block2浮动到右边
#block1 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(233, 142, 142);
200px;
height: 150px;
/* 浮动到左边 */
float: left;
}
#block2 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(145, 233, 142);
300px;
height: 180px;
/* 浮动到右边 */
float: right;
}
效果图
block1块和block2块都浮动起来了，两个块的高度都比block3高，所以block3顶到文档的最上面，被block1块和block2块盖住。
2.3清除浮动(clear)
clear 属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
clear清除浮动的原理（转自：https://blog.csdn.net/weixin_41796631/article/details/89425006）
（1）设置了 clear 的元素只能通过调整自身来使自己不要和浮动元素排列在一起。
（2）比如说，如果一个元素同时设置了 float:left 和 clear:left，希望左边不要有浮动元素，那么这个元素就要调整自己，排到下一行去。因为设置了 float: left，这个元素会往左边靠拢，所以这个元素会跑到下一行，同时往左浮动。
（3）如果设置了clear: right，也无法清除右边的元素。因为元素只能调整自身，不能移动别的元素。所以右边即使有浮动元素，也无法清除。
w3.org官方的解释是：「元素盒子的边不能和前面的浮动元素相邻」。我理解这句话其实就是调到前面元素的下一行，让左右两边不与前面的元素相邻。
2.4清除浮动的4种方法
（1）设置block3块的clear属性
#block3 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(241, 94, 241);
260px;
height: 120px;
/* 清除左边浮动 */
clear:left;
}
效果图：
#block3 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(241, 94, 241);
260px;
height: 120px;
/* 清除右边浮动 */
clear:right;
}
效果图：
（2）在block2块后面添加一个空div，这个空 div 的样式添加 clear：both。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>float用法</title> <style> #container { border: 1px solid rgb(163, 163, 163); background-color: #ddd; width: 800px; } #block1 { border: 1px solid rgb(163, 163, 163); background-color: rgb(233, 142, 142); width: 200px; height: 150px; /* 浮动到左边 */ float: left; } #block2 { border: 1px solid rgb(163, 163, 163); background-color: rgb(145, 233, 142); width: 300px; height: 180px; /* 浮动到右边 */ float: right; } #block3 { border: 1px solid rgb(163, 163, 163); background-color: rgb(241, 94, 241); width: 260px; height: 120px; } .clearfix{ clear: both; } </style> </head> <body> <div id="container"> <div id="block1">block1</div> <div id="block2">block2</div> <div class="clearfix"></div> </div> <div id="block3">block3</div> </body> </html>
效果图：
样式名为clearfix的块写在了container块里面，当清除浮动时，父元素container的高度被撑起来了，其兄弟元素block3的渲染也不再受到浮动的影响。因为此时clearfix块还在文档流内，所以父元素只能自动增加高度，其背景颜色就显示出来了。
如果将clearfix的块写在了container块外面，则父元素container的高度不能被撑起来，如下图所示：
（3）为父元素添加overflow属性
overflow属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
#container {
border: 1px solid rgb(163, 163, 163);
background-color: #ddd;
800px;
/* 父元素加上overflow属性 */
overflow: auto;
}
效果如下图，此时已经默认清除了浮动。
（以下内容转自：https://blog.csdn.net/h_qingyi/article/details/81269667）
（4）使用 after 伪元素清除浮动（推荐使用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>float用法</title> <style> #container { border: 1px solid rgb(163, 163, 163); background-color: #ddd; width: 800px; } #block1 { border: 1px solid rgb(163, 163, 163); background-color: rgb(233, 142, 142); width: 200px; height: 150px; /* 浮动到左边 */ float: left; } #block2 { border: 1px solid rgb(163, 163, 163); background-color: rgb(145, 233, 142); width: 300px; height: 180px; /* 浮动到右边 */ float: right; } #block3 { border: 1px solid rgb(163, 163, 163); background-color: rgb(241, 94, 241); width: 260px; height: 120px; } .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ } </style> </head> <body> <div id="container" class="clearfix"> <div id="block1">block1</div> <div id="block2">block2</div> </div> <div id="block3">block3</div> </body> </html>
起作用的代码如下：
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
效果图：
（5）使用before和after双伪元素清除浮动（推荐使用）
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
效果与上面相同。
（6）给浮动元素父级设置高度
（7）设置父元素同时浮动
（8）父元素设置成inline-block
（9）br 标签清除浮动
参考文章：
https://www.w3school.com.cn/cssref/pr_class_float.asp
https://blog.csdn.net/nanjinzhu/article/details/82716522
https://blog.csdn.net/weixin_34062469/article/details/91721757
https://blog.csdn.net/linysuccess/article/details/53432568
https://blog.csdn.net/qq_42039588/article/details/100982293
https://blog.csdn.net/sunny1996/article/details/68959176
https://blog.csdn.net/weixin_41796631/article/details/89425006
https://blog.csdn.net/weixin_43990215/article/details/95166061?utm_medium=distribute.pc_relevant.none-task-blog-title-1&spm=1001.2101.3001.4242
https://blog.csdn.net/weixin_34072857/article/details/91372246?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param
https://www.cnblogs.com/nxl0908/p/7245460.html