刚学习了浮动，这里整理一下清除浮动的方法。
伪元素清除浮动是伪元素的用途之一，这是清除浮动的一个相对比较好的方法，可以减少无意义的标签，使得html尽量简单。可以在浮动元素的容器内增加一个class类，比如说取名为clearfix。然后在clearfix里面添加一个伪元素，只能用after，利用这个看不见的元素来清除浮动。这里要注意的一点伪元素生成的默认是行内元素，而是clear的对象一定是块级元素，否则不起作用，所以要设置一下display属性。
在伪元素里面设置display属性为table，也是比较优越的方法。
不用伪元素，直接在父容器里面 display: table来模拟表格布局，也可以清除浮动，并且实现自动对齐。当然表格元素也会有它的弊端。
给浮动元素的父容器添加 overflow:hidden或 overflow:auto或者 overflow: scroll，也可以清除浮动。
在浮动的元素后面（同一层级），增加一个新标签，比如： <div class="clear"></div>，然后在这个空元素里面设置 clear: both 清除浮动。当然这样的话，就会增加无用的标签，使得html变得冗余。
给浮动元素的父容器也设置浮动，也能达到清除浮动的效果。但它会给下面的元素带来布局的影响。
当浮动元素 同一层级 的后面还有元素的时候，可以给后面的元素设置清除浮动，来达到为上面的元素清除浮动的效果。
给父容器设置 display: inline-block 之后，容器就可以形成BFC，这样就会有独立的渲染空间，就算有浮动元素也会把容器撑开。
总结：
首先，我们制作一个简单的html页面。父级元素是div，内部元素，是两个ul，两个ul分别是左浮动。并且为父级元素添加边框。
2/7
我们可以发现，父级元素根本没有被子元素的高度所撑开，而是只保持了h标签的高度，这就是浮动，导致的。
3/7
清除浮动，顾名思义就是clear:both，这的确是一种方法，但是要确定我们的clear:both是应用在哪里。
4/7
我们可以在html页面上，最后一个浮动元素的后面，添加一个div，并设置其style为clear:both。
5/7
我们还可以为浮动的元素的父级元素添加伪类，*::after{content""display:blockclear:both}，这样将会使得浮动止于此
6/7
除了这些，我们还可以为父级元素添加overflow属性，可以设为hidden,也可以设为auto
7/7
以上三种方法是小渔自己通过亲身经历，总结而来的哦。正确的页面显示效果如图所示
1、使用clear:both清除浮动在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。
优点：简单，方便兼容性好
缺点：因为会造成结构混乱，不利于后期维护
建议：一般情况下不建议使用该方法
2、利用伪元素clearfix来清除浮动
给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的
.clearfix:after {
display: block
clear: both
content: ""
visibility: hidden
height: 0
}
.clearfix { zoom: 1}
原理：IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义在公共类，以减少css代码
3、父级div定义overflow方法
当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了。
.parent-container {
/* other style... */
overflow: hidden
}
原理：它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果。
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
4、双伪元素方法的使用
通过给父元素设置双伪元素来达到清除浮动的效果，即添加:before和:after伪元素。
.clearfix:before,.clearfix:after {
content: ""
display: block
clear: both
}
与方法2相同
