请教老师，2-10和2-11所讲的清除浮动的差别有疑问
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div0{
border: 1px black solid;
width: 700px;
}
.clearDiv{
/*clear: both;*/
}
.div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
/*clear: both;*/
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
/*clear: both;*/
}
.div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
clear: both;
}
.div4{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
/*clear: both;*/
}
.div5{
width: 250px;
height: 250px;
background-color: orange;
float: left;
/*clear: both;*/
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"></div>
<div class="div2"></div>
<div class="clearDiv"></div>
<div class="div3"></div>
</div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>如上是2-10所讲的，清除浮动。这个时候父元素的高度坍塌仍存在。如果解释为清除元素自身浮动，相当于没有设置浮动，也不对，因为那样的话，应该元素被覆盖，所以视频中这样解释也不准确。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div0{
border: 1px black solid;
width: 700px;
}
.clearDiv{
clear: both;
}
.div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
/*clear: both;*/
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
/*clear: both;*/
}
.div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
/*clear: both;*/
}
.div4{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
/*clear: both;*/
}
.div5{
width: 250px;
height: 250px;
background-color: orange;
float: left;
/*clear: both;*/
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"></div>
<div class="div2"></div>
<div class="clearDiv"></div>
<div class="div3"></div>
</div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>如上此段就是2-11的写法，这个时候就父元素没有坍塌。差别就是此元素没有作为浮动过。其他清除浮动的写法都是一样的。
为什么会出现一个父元素坍塌解决了，一个没有解决。这两者之间的差别到底是什么了？谢谢。
正在回答 回答被采纳积分+1
这里老师帮你总结几种常见的清除浮动的方法和原理，同学再好好理解一下
1、给父级元素单独定义高度（height）
原理：如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响
2、加空div标签，设置clear:both
原理：在浮动的盒子之下再放一个标签，给这个标签设置clear:both，来清除浮动对页面的影响，这里分为两种情况：
（1）内部标签：会将这个浮动盒子的父盒子高度重新撑开
（2）外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子
注意：一般情况下不会使用这一种方式来清除浮动，因为这种清除浮动的方式会增加页面的标签，造成结构的混乱
3、父级div定义 overflow:hidden
原理：先找到浮动盒子的父元素，再在父元素中添加一个属性overflow:hidden，就是清除这个父元素中的子元素浮动对页面的影响
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）
希望可以帮到你！
对于后者，我写了一个例子。
clearDiv清除浮动clear:both，只会对自身元素起作用，不会去改变周围的其他元素，让clearDiv的两边不存在浮动元素，通过改变自己。这个时候，clearDiv就从浮动的div1,div2,div3下面出来，单独一行。因为clearDiv就是在标准流中，父div容器为了包住clearDiv，所以高度不塌陷了。
其实不是因为div1，div2，div3而撑起父DIV，因为他们还是浮动的。通过divTest的显示，可以确定是浮动。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div0{
border: 1px black solid;
width: 700px;
}
.clearDiv{
height: 10px;
background-color: black;
clear: both;
}
.testDiv{
height: 10px;
background-color: gray;
}
.div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
/*clear: both;*/
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
/*clear: both;*/
}
.div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
/*clear: both;*/
}
.div4{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
/*clear: both;*/
}
.div5{
width: 250px;
height: 250px;
background-color: orange;
float: left;
/*clear: both;*/
}
/* 清理浮动的最佳实践*/
.clearFloat::after {
content: "";
visibility:hidden;
height: 0px;
display: block;
clear: both;
}
/*针对IE浏览器的兼容性问题，解决IE浏览器不能清除浮动的bug修复*/
.clearFloat{
zoom:1;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"></div>
<div class="testDiv"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="clearDiv"></div>
</div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>
同学你好，
第一段代码高度塌陷是因为div0的子元素div1、div2设置了浮动，没有清除浮动，导致的高度塌陷，clearDiv是子元素，因此元素也需要清除浮动，关于同学提到的 如果解释为清除元素自身浮动，相当于没有设置浮动，是可以这样理解的。之所以没有出现被覆盖的原因是，因为元素设置了浮动后，再设置清除浮动，不仅仅是相当于没有设置浮动，同时也清除了其他浮动元素对自身的影响，所以不会被覆盖
2、第二个解决了父级高度塌陷的问题，是因为给clearDiv元素设置了clear：both；清除了div1和div2浮动带来的影响。
如果帮助到了你，欢迎采纳~祝学习愉快
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星