正是因为这种浮动的这种特性，所以本该属于普通流中的元素浮动之后，父级元素的高度就可能会发生变化(父级元素内部由于不存在其他普通流元素了，其高度就为0)，在实际应用中，会严重影响整体的布局。
所以我们需要使用清除浮动和闭合浮动来处理浮动带来的问题
清除浮动：对被影响文档位置的块级元素添加属性clear：left | right | both | none;使其下移，直到元素两边没有浮动元素。指使用clear阻止这个元素盒子的边和前面的浮动元素相邻的行为；
闭合浮动：是使浮动元素闭合，使父元素高度不再塌陷，高度被撑开了，使父元素能够包围浮动元素，从而减少浮动带来的影响。指避免float无法撑高父容器的默认行为
这是两者之间的区别：
闭合浮动的方法
1、添加额外的元素
main：wrap自己闭合浮动了，所以footer不用再清除浮动了(float:left) side：我也浮动了(float:left) footer：这次wrap人品爆发了, 通过在末尾添加了一个空标签，已经闭合浮动了优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：初学者不理解原理；如果页面浮动布局多，就要增加很多空div，代码语义化变差
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
2、使用伪类元素：新增.parent:after伪对象，其余不变
优点：浏览器支持好，不容易出现怪问题
.warp:after{ content: ".";/*生成一个元素内容为"."，为" "时也好用*/ display: block;/*让元素为块级元素*/ height: 0;/*用以下两种方式让元素不渲染*/ visibility: hidden; clear: both;/*清除浮动*/ }3、父元素设置overflow:hidden
.wrap{ margin:0 auto; width: 500px; border: 2px solid #EA2C0A; padding: 10px; overflow: hidden;/*新增*/ zoom:1;/*新增，针对IE6，但没有经过测试*/ }//第二种，在parent容器中添加overflow：auto的属性，并针对于IE6增加zoom:1的属性。优点：不存在结构和语义化问题，代码量极少。
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
4、父元素也设置浮动
只需给parent容器添加 float：left，也可闭合浮动。
优点：代码少
缺点：会导致整个页面大部分都处于浮动状态，页面布局容易出现问题
当然方法还有很多比如：display:table;改变盒模型属性。还有给父级元素添加position:absolute定位等方法。
说到底闭合浮动或者清楚浮动的原理主要就是这么两个原理：
通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
通过设置父元素 overflow 或者display：table 属性等来闭合浮动，其实这是触发了Block formatting contexts (块级格式化上下文，简称 BFC)。块级格式化上下文是CSS可视化渲染的一部分。它是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系。
块格式化上下文(BFC)有下面几个特点：
BFC就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，也不受外部渲染影响。
BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说，外部任何浮动元素区域和BFC区域是泾渭分明的，不可能重叠。
BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。
HTML结构中，当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染。
现在我们再来分析一下overflow清除浮动的原理：
当元素设置了overflow样式，且值不为visible时，该元素就建构了一个BFC。.warp因设置了值为auto的overflow样式，所以该元素建构出一个BFC，按照上面第三个特点，BFC的高度是要包括浮动元素的，所以.warp的高度被撑起来，达到了清除浮动影响的目的。overflow的作用就是为了构建一个BFC区域，让内部浮动的影响都得以“内化”。
至于哪些情况下，元素可以建构出BFC，大家可以自行查看CSS文档对BFC的定义，这里就不再赘述了。
