子标签设置了float的时候，父标签会撑不开高度。如果设置了设置高度就会每次都修改，这样就比较麻烦，所以最好能自动适用高度。
解决方式
方式1、父标签设置overflow属性为auto，hidden、
方式2、利用伪类标签在最后添加一个不可见元素即可或者直接添加一个块级元素，清除float。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
</head>
<style>
.main
{
/* background-color: #005588; */
border: #008000 solid 1px;
/* overflow: auto; hidden */
overflow: hidden;
}
.div1{
border: #860 solid 1px;
/* background-color: #008000; */
width: 100px;
height: 100px;
float: left;
}
.div2{
border: #890 solid 1px;
/* background-color: #608; */
width: 100px;
height: 100px;
float: left;
}
.div3{
border: #808 solid 1px;
/* background-color: #800; */
width: 100px;
height: 100px;
float: left;
}
.main_2
{
border: #000000 solid 1px;
}
.main_2::after
{
content: "";
display: block; /*设置块级元素*/
clear: both; /*清楚样式*/
}
.main_3
{
border: #005588 solid 1px;
}
.main_3 > .lastdiv
{
clear: both;
}
</style>
<body>
<pre>
子div设置了float的时候，父标签的的高度撑不开。
实现父标签高度撑开的方式1、父标签设置overflow属性为auto，hidden、
方式2、利用伪类标签在最后添加一个不可见元素即可。或者直接添加一个块级元素
</pre>
<div class="main">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<br />
<div class="main_2">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<br />
<div class="main_3">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="lastdiv"></div>
</div>
</body>
</html>
