推荐俩种依靠clear属于清除浮动的方法，推荐第二种，探究的记录在后面，赶时间的看个开头就好了。
1. 在受浮动坍塌的父级元素结束标签前，添加一个高宽为0的空div，然后设置 clear:both
2 .创建一个clearfix样式，并使用伪类元素 after 添加样式到父元素上
无论是块级元素还是行内元素设置了浮动之后都会生成一个块级框，并且可以编辑它的宽高，此时该浮动元素就脱离了文档流。举个例子，把网页看成一个三维的泳池，文档流在泳池底部，给文档流中一个元素设置了float之后，它就从这个网页的泳池底部浮动到了水上。此时同级的块级元素会无视float元素在网页上的位置进行布局。但是行内元素并不会被遮挡，而是像和它一起浮在水面上一样环绕这个浮动元素。
根据前面介绍，元素设置float后好像会从网页上浮一样，脱离文档流。这样的话，如果父级元素原本没设置高度，计划用子元素撑开父级元素。此时子元素因为float上浮，则父级元素的高度就会因为自身没设置而坍塌。
来个示例 ( 下文都是依据这个示例来讨论，故先给出HTML结构和CSS样式 )：
让我们再打开开发者工具具体看看
然后让我们把父元素也一同浮动看看
例如:
此时背景色为粉色的 ch2 就会被浮动的 背景色半透明的ch1 覆盖，但是ch2的字体还是环绕着ch1
如果让ch2 也浮动，则ch1 和 ch2 就相当于一同浮起到这个网页泳池的水面上。
另外，ch2 虽然不浮动起来时会被 同级ch1遮挡，但是ch2 它内部的行内元素却是环绕 ch1 的 ,同时 ch2 内部的块级元素还是会被浮动起来的ch1遮挡。
解决父元素高度坍塌的问题，其实可以给父元素指定个高度，但这样就没有父元素高度自适应的意义了；另外全部元素一起浮动也能解决父元素坍塌，子元素被遮挡的问题，但这本质上只是将所有元素一起浮动到顶端，并没有解决问题，反而还会影响另外的元素排列。下面介绍clear属性来清除浮动
那我们先来看看 clear 属性有什么用
我们稍稍改动一下上面的例子在 ch2 下加一个 p 标签然，然后改动一下 ch1 和 ch2 的样式让它们俩高度不一样。
若此时我们给p元素也加上浮动呢？
样例：
浮动什么意思呢，比如，默认的，我们知道，div是占满一行的，现在我们想把两个div显示在一行上，那怎么办呢\x0d\x0a111112222\x0d\x0a这样我们就设置了两个div，一个宽度100px,一个宽150px,可预览一下，我们的div仍在两行上，那么怎么把它改到一行上呢，这儿就需要float，设置第一个div的float为left\x0d\x0a111112222\x0d\x0a再预览，就可以看到，它们到一行上了。\x0d\x0aclear是什么意思呢，clear是清除的意思，它有三个值，left,right,both\x0d\x0a很好理解，如果设置了clear:left，它就不怕它的左边有float，同理clear:right,clear:both，是左右都不让有float\x0d\x0a举个例子，还是上面的\x0d\x0a我们设置第二个div的clear:left,也就是不让它左边有float\x0d\x0a111112222\x0d\x0a我们预览一下，就可以看到，尽管第一个div已经float:left了，这两个div仍然在两行上，就是由于第二个div不让它左边有float\x0d\x0a因为css的定义是后面的可以覆盖前面的，明白了吧 回答于 2022-12-11浮动，你可以理解为漂浮在空中，然后它后面紧挨着但未设置浮动的元素则仍然在地上，并且填补了漂浮元素原来在地上所占用的位置，也就是说，非浮动元素“钻”到浮动元素的下面去了，所以被盖住了。
要想避免这种情况，必须让浮动元素清除浮动，最简单的方式就是给浅蓝色div加一个 overflow:hidden ，这样它在空中漂浮的同时也保留了它原来在地面占用的位置，这样后面的其他非浮动元素就不会移动位置了，也就不会被遮盖。
