<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
将box1设置浮动，由于box1的浮动，导致box3位置上移，也就是box3受到box1浮动的影响，位置发生了改变。
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除元素队当前元素所产生的影响。
clear:
- 作用：清除浮动元素对当前元素所产生的影响。
- 可选值：
left：清除左侧浮动元素对当前元素的影响。
right:清除右侧浮动元素对当前元素的影响.
both：清除两侧中最大影响的一侧。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: purple;
float: right;
}
.box3{
width: 100px;
height: 100px;
background-color: yellowgreen;
clear: both;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
可以看到块3的位置受块2的影响较大，故clear的是块2的影响。其实原理就是浏览器自动将块3的外边距调为200px。
- 原理：
设置清除浮动以后，浏览器会自动为元素添加一个外边距，以使其位置不受其他元素的影响。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: purple;
clear: left;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
我们可以用after和clear结合来解决高度塌陷问题：
需求：box1包住浮动的box2。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
border:10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
step1：可以看到上图，box1无法包住浮动的box2。因此我们需要有一个东西把box1的框撑起了。于是为这个需求增加一个box3，不给它设置内容，给它一个hight：100px,目前看是撑起来了，但是一旦我们改变box2的高度，box2就会出框，所以该方法也不行。
step2:既然学到了clear，就可以用到clear。我们还是为需求添加一个box3，内容“hello”。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
border:10px red solid;
}
.box2{
width: 100px;
height: 200px;
background-color: #bfa;
float: left;
}
.box3{
/*通过box3将box1撑起了，解决高度塌陷问题。*/
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3">hello</div>
</div>
</body>
</html>
step3:可以看到添加的box3确实可以解决高度塌陷的问题，但是我们添加的box3改变了网页布局的结构，而高度塌陷属于页面显示部分。HTML负责结构，CSS负责样式，两者应该各司其职。所以利用结构来解决样式的问题不是最好的。高度塌陷应该要交给CSS才对。
step4:如果用css来解决高度塌陷问题，我们可以参考step3的原理，加个元素将框撑起了。利用after可以实现。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
border:10px red solid;
}
.box2{
width: 100px;
height: 200px;
background-color: #bfa;
float: left;
}
.box1::after{
content: " ";
clear: both;
/*after是行内元素，不独占一行，因此还要将其变成块元素*/
display: block;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
clearfix：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: pink;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
margin-top: 100px;
}
.box1::before{
content: '';
display: table;
}
/*clear这个样式可以解决高度和外边距重叠的问题。遇到这些问题，可以直接使用clear这个类。*/
.clearfix::before,.clear ::{
content: "";
display: table;/**/表格
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
