在代码中在放一个空的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相同
两者是有绝对的区别的，float是时元素浮动，而position是用来给一个元素定位的。1、float的定义和常见用法：float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。、实例如下：float属相使得块级元素的div可以在同一行并排，效果如下：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。其属相值有：绝对定位的实例：1、浮动元素会完全脱离文档流，不再占据文档流中的位置2、设置浮动以后元素会向父元素的左侧或右侧移动，
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离， 将会无法撑起父元素的高度，导致父元素的高度丢失。
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！
思想：在父元素的后面加内容，内容利用clear清除浮动元素带来的影响
