1.3种方式防止父元素高度不及子元素
height:200px;//高度设置一样
overflow: auto；
clear: left;
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.a{
width:20%;
/* 范围更大，比background-color */
background: orange;
}
.b{
width:60%;
background:green;
}
.c{
width:20%;
background:blue;
}
.hh{
height:260px;
background: black;
}
.a,.b,.c{
float:left;
/* 默认高度为0，除非加内容 */
height:200px;
}
.outer{
/* 3种方式防止父元素高度不及子元素 */
height:200px;
/* overflow: auto； */
/* clear: left; */
}
</style>
</head>
<body>
<p>文字环绕效果</p>
<!-- 父元素 -->
<div class="outer">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<div class="hh"></div>
</body>
</html>结果：
2.不受其他浮动的影响：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
ul{
width:300px;height:500px;
border-width:1px;
border-style:solid; /* 只有当这个值不是 none 时边框才可能出现 */
border-color:black;
}
li{
clear:both
}
.a,.c,.e{
float:left;
}
.b,.d{
float:right;
}
</style>
</head>
<body>
<ul>
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<li class="d"></li>
<li class="e"></li>
</ul>
</body>
</html>结果：
3.重叠
4.排列
