要想彻底清除浮动的影响，适合的属性不是 clear 而是 overflow。
一般使用 overflow:hidden，利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响。
1. 前言：
我们都知道overflow:hidden的字面意思是超出隐藏，说到这个超出隐藏就跟父元素的高度有关了，高度一定了的时候，超出隐藏才有依据。
我们知道当子元素开始浮动了，会脱离文档流，其父元素的高度就会变为0，这个时候页面其他元素就会向上占据位置，就会导致页面混乱。
这个时候我们在父元素设置overflow:hidden,就解决了页面混乱的问题。
2. overflow:hidden作用机制BFC：
定义：BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。
作用：独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。
那什么时候会触发 BFC 呢？常见的情况如下：
• <html>根元素；
• float的值不为none；
• overflow的值为auto、scroll或hidden；
• display的值为table-cell、table-caption和inline-block中的任何一个；
• position的值不为relative和static。
（以上主要是对张鑫旭老师的《css世界》以及其他作者的观点的做的知识梳理）