清除浮动
参考学习：https://www.cnblogs.com/nxl0908/p/7245460.html
1.父级div定义伪类：after和zoom
2.在结尾处添加空div标签clear:both /（结尾处加br标签clear:both）
3.父级div定义display:table
4.父级div定义height
5.父级div定义overflow:hidden
6.父级div定义overflow:auto
7.父级div也一起浮动
1.父级div定义伪类：after和zoom
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.container{
border:1px solid black;
}
.box3{
height: 200px;
background-color: green;
}
**.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0}
.clearfloat{zoom:1}**
</style>
<body>
<div class="container clearfloat" >
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3">
</div>
</body>
2.在结尾处添加空div标签clear:both
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.container{
border:1px solid black;
}
.box3{
height: 200px;
background-color: green;
}
**.clearboth{
clear:both;
}**
</style>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
**<div class="clearboth"></div>**
</div>
<div class="box3">
</div>
</body>
3.父级div定义height
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.container{
border:1px solid black;
**height: 100px;**
}
.box3{
height: 200px;
background-color: green;
}
</style>
<body>
<div class="container" >
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3">
</div>
</body>
4.父级div定义overflow:hidden
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.container{
border:1px solid black;
**overflow: hidden;**
}
.box3{
height: 200px;
background-color: green;
}
</style>
<body>
<div class="container" >
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3">
</div>
</body>
5.父级div定义overflow:auto
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.container{
border:1px solid black;
overflow: auto;
}
.box3{
height: 200px;
background-color: green;
}
</style>
<body>
<div class="container" >
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3">
</div>
</body>
6.父级div也一起浮动
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.container{
border:1px solid black;
**float:left;**
}
.box3{
height: 200px;
background-color: green;
**clear:both;**
}
</style>
<body>
<div class="container" >
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3">
</div>
</body>
7.父级div定义display:table
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.container{
border:1px solid black;
display:table;
}
.box3{
height: 200px;
background-color: green;
}
</style>
<body>
<div class="container" >
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3">
</div>
</body>
8、结尾处加br标签clear:both
