目录
（1）盒子浮动后，将脱离其原本位置，文档流后面的元素会自动递补其位置。如下图：
编辑（3）左浮动：第一个设置左浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟其后，从左到右排列，直到放不下才换行。
（4）右浮动：第一个设置右浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟其后，从右到左排列，直到放不下才换行。如下所示：
（5）浮动盒排布规则:①向上向左或者向右排列②若空间无法容纳，则先向下移动，直到高度足够后向左向右③当前浮动盒的顶边，不得高于上一个浮动盒的顶边。
1、概念：为当前盒子设置一个clear属性，清除前面盒子浮动对它的影响。
2、其中left清除前面盒子左浮动的影响，right清除前面盒子右浮动的影响，both清除前面盒子的浮动影响（不管左浮动还是右浮动）
一、浮动
1、脱离文档流
（1）盒子浮动后，将脱离其原本位置，文档流后面的元素会自动递补其位置。如下图：
盒子2浮动起来了，脱离了文档流，盒子3自动递补盒子2的位置。因为 的弊端，盒子3的字体还在盒子4那里。
换一个角度看，如下图效果：
代码如下：
<head>
<title>Document</title>
<style>
/* 灰色盒子的大小 */
article{
width: 1920px;
height: 500px;
background-color:gray;
margin-bottom: 5px;
}
/* div宽、高、背景颜色和元素下方的外边距大小 */
div{
width: 200px;
height: 100px;
background-color:pink;
margin: 5px;
}
#div2{
background-color: red;
float: left;
}
</style>
</head>
<body>
<article>
<div>盒子1</div>
<div id="div2">盒子2(浮动)</div>
<div>盒子3</div>
<div>盒子4</div>
<div>盒子5</div>
</article>
</body>（2）盒子浮动起来后，会生成一个与父盒等宽的浮层。
（3）左浮动：第一个设置左浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟其后，从左到右排列，直到放不下才换行。
盒子1没有设置浮动 ， article的宽只有1400px，不够放置7个盒子，所以盒子8在下一行。
代码如下：
<head>
<title>盒子的浮动</title>
<style>
/* 灰色盒子的大小 */
article{
width: 1400px;
height: 500px;
background-color:gray;
margin-bottom: 5px;
}
/* div宽、高、背景颜色和元素下方的外边距大小 */
div{
width: 200px;
height: 100px;
background-color:pink;
margin: 5px;
}
#div2{
background-color: red;
float: left;
}
#div3{
background-color: green;
float: left;
}
#div4{
background-color: blue;
float: left;
}
#div5{
background-color: blue;
float: left;
}
#div6{
background-color: blue;
float: left;
}
#div7{
background-color: blue;
float: left;
}
#div8{
background-color: blue;
float: left;
}
#div9{
background-color: blue;
float: left;
}
</style>
</head>
<body>
<article>
<div>盒子1</div>
<div id="div2">盒子2(浮动)</div>
<div id="div3">盒子3(浮动)</div>
<div id="div4">盒子4(浮动)</div>
<div id="div5">盒子5(浮动)</div>
<div id="div6">盒子6(浮动)</div>
<div id="div7">盒子7(浮动)</div>
<div id="div8">盒子8(浮动)</div>
<div id="div9">盒子9(浮动)</div>
</article>
</body>（4）右浮动：第一个设置右浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟其后，从右到左排列，直到放不下才换行。如下所示：
<head>
<title>盒子的浮动</title>
<style>
/* 灰色盒子的大小 */
article{
width: 1000px;
height: 500px;
background-color:gray;
margin-bottom: 5px;
}
/* div宽、高、背景颜色和元素下方的外边距大小 */
div{
width: 200px;
height: 100px;
background-color:pink;
margin: 5px;
float: right;
}
#div2{
background-color: red;
}
#div3{
background-color: green;
}
#div4{
background-color: blue;
}
#div5{
background-color: orange;
}
</style>
</head>
<body>
<article>
<div>盒子1</div>
<div id="div2">盒子2(浮动)</div>
<div id="div3">盒子3(浮动)</div>
<div id="div4">盒子4(浮动)</div>
<div id="div5">盒子5(浮动)</div>
</article>
</body>（5）浮动盒排布规则:①向上向左或者向右排列②若空间无法容纳，则先向下移动，直到高度足够后向左向右③当前浮动盒的顶边，不得高于上一个浮动盒的顶边。
如下：(没有浮动前的效果)
排布结果：
2、父辈的高度塌陷
当父盒由于各种原因没有设置高度，子盒的浮动会导致父盒的高度塌陷。父盒高度塌陷后，会影响父盒的兄弟盒子的布局。
如下:（当父盒·高度没有设置时，其高度由子盒撑开）
若子盒全部浮走，则高度塌陷为0。
最简单的解决方案就是为父盒设置高度。如：
代码如下:
<head>
<title>父辈的高度塌陷</title>
<style>
/* 灰色盒子的大小 */
article{
width: 1400px;
/* 如果父盒由于各种原因没有设置高度，子盒的浮动会导致父盒的高度塌陷。父盒高度塌陷后，会影响父盒的兄弟盒子的布局 */
height: 500px;
background-color:gray;
margin-bottom: 5px;
}
#div1{
width: 200px;
height: 100px;
margin-bottom: 5px;
background-color: red;
float: left;
border: rgb(167, 162, 162) 5px solid;
}
#div2{
background-color: green;
float: left;
width: 200px;
height: 150px;
margin-bottom: 5px;
border:rgb(167, 162, 162) 5px solid;
}
#div3{
width: 200px;
height: 200px;
margin-bottom: 5px;
background-color: blue;
float: left;
border:rgb(167, 162, 162) 5px solid;
}
#div4{
width: 200px;
height: 250px;
margin-bottom: 5px;
background-color: purple;
float: left;
border:rgb(167, 162, 162) 5px solid;
}
</style>
</head>
<body>
<article>
<div id="div1">盒子1(浮动)</div>
<div id="div2">盒子2(浮动)</div>
<div id="div3">盒子3(浮动)</div>
<div id="div4">盒子4(浮动)</div>
</article>
</body>快复制代码动手试试吧 ！！！！！！！
3、兄弟盒子的文字环绕
如下展示效果：
盒子浮动后，文档流后面的兄弟盒子会自动递补其位置。其中，文本会非常敏感，将自动环绕浮动盒。（浮动机制的初衷）
二、清除浮动
1、概念：为当前盒子设置一个clear属性，清除前面盒子浮动对它的影响。
2、其中left清除前面盒子左浮动的影响，right清除前面盒子右浮动的影响，both清除前面盒子的浮动影响（不管左浮动还是右浮动）
3、作用：可以解决高度塌陷和文字环绕带来的问题。
4、清除浮动示例：
以上是没有添加前的效果 ，可以复制上面父辈的高度塌陷的代码动手试试!
添加后的效果，清除前面盒子浮动对它的影响，撑开父盒的高度。代码如下：
<head>
<title>父辈的高度塌陷</title>
<style>
/* 灰色盒子的大小 */
article{
width: 1400px;
/* 如果父盒由于各种原因没有设置高度，子盒的浮动会导致父盒的高度塌陷。父盒高度塌陷后，会影响父盒的兄弟盒子的布局 */
/* height: 500px; */
background-color:gray;
margin-bottom: 5px;
}
#div1{
width: 200px;
height: 100px;
margin-bottom: 5px;
background-color: red;
float: left;
border: rgb(167, 162, 162) 5px solid;
}
#div2{
background-color: green;
float: left;
width: 200px;
height: 150px;
margin-bottom: 5px;
border:rgb(167, 162, 162) 5px solid;
}
#div3{
width: 200px;
height: 200px;
margin-bottom: 5px;
background-color: blue;
float: left;
border:rgb(167, 162, 162) 5px solid;
}
#div4{
width: 200px;
height: 250px;
margin-bottom: 5px;
background-color: purple;
float: left;
border:rgb(167, 162, 162) 5px solid;
}
#div5{
width: 300px;
border: yellow solid 5px;
}
footer{
width: 1400px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<article>
<div id="div1">盒子1(浮动)</div>
<div id="div2">盒子2(浮动)</div>
<div id="div3">盒子3(浮动)</div>
<div id="div4">盒子4(浮动)</div>
<!-- 这个div盒子没有实际显示效果，主要用于撑开父盒，避免高度塌陷影响其他的布局；其实，H5给我们提供了伪元素，我们可以利用伪元素代替我们下面这个盒子。前端开发的原则是：非必要不改变MTNL的结构，样式只通过CSS实现 -->
<div style="clear:both;" id="div5"></div>
</article>
<footer>
我是网页的页脚
</footer>
</body>
标签：浮动,盒子,background,color,5px,left From： https://blog.csdn.net/2401_87197766/article/details/142928618