CSS系列之浮动清除clear（三）
一、为什么需要清除浮动
浮动的原理是让元素脱离文档流，直接浮在桌面上。使用浮动后续添加内容布局可能会产生布局混乱，造成高度坍塌，这时候就可以利用清除浮动来解决父元素高度塌陷的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
}
.box2 {
width: 150px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html> 
现在给1号盒子添加一个左浮动float :left，我们来看看会发生什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
float :left;
}
.box2 {
width: 150px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
我们可以看到2号盒子和1号盒子发生了重叠，那么原因是什么呢，原因是1号盒子漂浮起来了，原本所占的空间空缺出来了，所以2号盒子到了1号盒子的位置。
下面总结5种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）
二、解决方法之clear
直接给第二个盒子添加一个clear:left 这里需要注意,clear消除的是上一个盒子对自己的影响，所以，前面一个盒子往哪边浮动，我们就clear哪边，这里的上一个盒子是float:left，所以我们在第二个盒子上添加的也是clear:left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
float :left;
}
.box2 {
width: 150px;
height: 150px;
background-color: skyblue;
clear: left;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
三、解决方法之overflow:hidden
overflow这个属性需要添加在父元素上，所以我们给两个盒子添加一个父元素，为了看清楚高度塌陷,我们在添加一个底部盒子，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
}
.box2 {
width: 80px;
height: 80px;
background-color: skyblue;
}
.father {
width: 100%;
border: 2px solid red;
}
.bottom {
width: 100%;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<div class="bottom">3</div>
</body>
</html>
现在给1号盒子和2号盒子添加浮动,我们来看看会发生什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.box2 {
width: 80px;
height: 80px;
background-color: skyblue;
float: left;
}
.father {
width: 100%;
border: 2px solid red;
}
.bottom {
width: 100%;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<div class="bottom">3</div>
</body>
</html>
可以看到我们的底部盒子不在原来的位置了，原因是什么呢,原因就是此时父元素我们并没有给他设置高度，父元素的高度完全是1号2号盒子撑起来的，现在给1号2号盒子添加了浮动，不占据原来的位置了，所以父元素此时的高度为零，不占位置了，底部盒子就会上去,造成高度塌陷。
解决方法就是:给父元素添加一个overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.box2 {
width: 80px;
height: 80px;
background-color: skyblue;
float: left;
}
.father {
width: 100%;
border: 2px solid red;
overflow:hidden;
}
.bottom {
width: 100%;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<div class="bottom">3</div>
</body>
</html>
四、解决方法之给父元素添加高度
方法就是给父元素添加一个高度，注意父元素高度的设置一定要大于子元素中高度最高的盒子，以此例子来说就是，子元素中最高的盒子高度是100px，那么父元素的高度一定要大于等于100px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.box2 {
width: 80px;
height: 80px;
background-color: skyblue;
float: left;
}
.father {
width: 100%;
height: 100px;
border: 2px solid red;
}
.bottom {
width: 100%;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<div class="bottom">3</div>
</body>
</html>
这里我们主要看clear方法，认真体会clear的作用和效果，感谢大家的观看，我们下期再见。