浮动副作用
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动。浮动也会产生一些问题，所以在使用的时候还需要清除浮动，这样操作起来还是很麻烦的，在没有浮动的时候就不要乱使用，因为还需要清除掉，这样的操作还是很繁琐的。
浮动元素会造成父元素高度塌陷，后续元素会受到影响
在日后的布局当中是否都使用清除浮动的方式去布局，这样就不会有标准流的问题，只有在有需要的时候才使用浮动去解决。因为使用浮动也会产生一些问题。
就和吃药的道理是一样的，如果没有生病就不需要吃药，因为药也是有副作用的，浮动也是如此。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
height: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>在一个灰色的大盒子里面有三个小盒子
如果将大盒子的高度height: 500px去掉，那么就是你内容所撑开的高度。如果宽度不设置就是全局宽度，因为块级元素默认就是100%的宽度。
如果将大盒子高度去掉，小盒子设置浮动，那么效果就没有了。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
可以看到大盒子的宽度为0。此时大盒子高度为500，宽度为0。大盒子看不见了。这是因为浮动会造成父亲元素的高度塌陷，父元素不会被撑开了。
不仅父亲元素的高度塌陷，而且后续的元素也会受到影响。按道理来说，text元素是没有浮动的，没有浮动那么块级元素就是上下摆放，按道理就是在下面的位置。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="text"></div>
</div>
</body>
</html>可以看到还是被撑开了，有没有在下面。如果写在div的外面，也还是同样受到影响。
添加浮动了，并且也有高度，不像我们上面的高度为0.
这个时候就需要清除浮动了，
父亲元素设置高度，可以解决高度塌陷的问题。后续受到clean的元素可以使用clean属性进行解决。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
height: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="text"></div>
</body>
</html>这样就是正常的，并且同级单独块级元素就被顶下来了，因为是同级关系，应该挨着它下面摆放。
如果放在里面还是被挡住了，因为元素压根没有放浮动，按道理来说块级别元素应该在下面摆放，而不是在后面被遮挡住。
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="text"></div>
</div>
text受到影响了，clean的属性是清除浮动 left清除左浮动，right清除右浮动。在真实开发的时候不一定是左浮动还是右浮动，可以选择both。无论是左浮动还是右浮动都清除掉。哪个子元素出现问题了就在哪个子元素下面添加both。
.text{
width: 100px;
height: 100px;
background-color: black;
clear: both;
}
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="text"></div>
</div>
</body>
父亲元素overflow: hidden clear: both两个属性要一起写，这种解决方案是日后使用比较广泛的一种解决方案。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
overflow: hidden;
clear: both;
width: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="text"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
background-color: blueviolet;
}
.container::after{
content: "";
display: block;
clear: both;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: black;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="text"></div>
</div>
</body>
</html>清除浮动：如果造成了高度塌陷，如果方便设置就直接设置，如果不方便设置那么就要使用overflow hidden这种形式。
如果子元素受到影响分为里面和外面，如果是里面增加clean属性，如果在外面，那么之前的高度清除浮动，overflow和虚对象都可以默认将其撑下来了。（在里面需要增加clean）
