推荐两种依靠clear属于清晰浮动的方法，推荐其次，研究的记录在后面，赶时间的看个底层就好了。
1. 在受浮动塌陷的父等级元素结束标签前，添加一个高宽为0的空div，然后设置clear：both
2.创建一个clearfix样式，并在添加样式到父元素上后使用伪类元素
>无论是块级元素还是行内元素设置了浮动之后都会生成一个块级框，并且可以编辑它的宽高，此时该浮动元素就去掉了文档流。举个例子，把网页看成一个三维的水池，文档流在水池底部，给文档流中的一个元素设置了浮动之后，它就从这个网页的水池底部浮动到了水面。此时同级的块级元素会无视浮动元素在网页上的位置进行布局。但是行内部元素并不会被遮挡，而是像和它一起浮在水面上一样围绕这个漂浮元素。
根据前面的介绍，元素设置float后会希望从网页上浮起一样这样的话，如果父级元素到底没有设置高度，计划用子元素撑开父级元素。此时子元素因为浮在浮上，则父级元素的高度就会因为自身没有设置而塌陷。
来个示例（下面都是参照这个示例来讨论，故先给出HTML结构和CSS样式）：
我们再打开开发者工具具体看看
然后让我们把父元素也一起漂浮看看
例如：
此时背景色为粉色的ch2就会被漂浮的颜色背景半透明的ch1 覆盖，但是 ch2 的字体还是围绕着 ch1
如果让 ch2 也浮动，则 ch1 和 ch2 就一起浮起这个网页游泳池的水面上。
另外，ch2 虽然不浮动起来时会被同级 ch1 覆盖，但是 ch2 它内部的行内部元素却是环绕 ch1 的，同时 ch2 内部的块级元素还是会被浮动起来的 ch1 覆盖。
解决父元素高度塌陷的问题，其实可以给父元素指定个高度，但这样就没有父元素高度自适应的意义了；其他所有元素一起浮动也能解决父元素塌陷，子元素被拥挤的问题，但这本质上只是将所有元素一起浮动到下方，并没有解决问题，反而会影响其他的元素排列。下面介绍clear属性来浮动浮动
那我们先来看看clear属性有什么用
我们稍稍担心一下上面的例子在 ch2 下加一个 p 标签然，然后担心一下 ch1 和 ch2 的样式让他们俩高度不一样。
若此时我们给p元素也加上浮动呢？
样例：