关于overflow清楚浮动的问题

Question

Overflow设置为hidden 之后能解决父级元素不能包含含有浮动属性的子元素，他的原理是什么？为什么这样设置就可以完成这个效果

Answer 1

其实搜一下“为什么overflow可以清除浮动”就可以得到答案。。

可以看一看CSS中与BFC相关的内容~

Answer 2

块格式化上下文block formatting context(BFC) 是页面 CSS 视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响范围的一个区域。如何创建一个BFC？有如下几个方式：
1.根元素或其他包含它的元素（如HTML标签）；
2.浮动（元素的float不为none）；
3.绝对定位（元素的position为absolute或fixed）；
4.行内块inline-blocks（元素的display为inline-block）；
5.表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)；
6.表格标题 (元素的 display: table-caption, HTML表格标题默认属性)；
7.overflow的值不为 visible的元素；
8.弹性盒 flex boxes (元素的 display: flex或 inline-flex)；
将元素设置的overflow设置为hidden，此区域将成为BFC区域，BFC内子元素不能影响到外界元素，会达到清除浮动的效果。如果你将元素的display设置为inline-block，也会有相同效果。
另外清除浮动最好用：

.clearfix { 
  *zoom: 1; 
} 
.clearfix:before, 
.clearfix:after { 
  display: table; 
  line-height: 0; 
  content: ""; 
} 
.clearfix:after { 
  clear: both; 
} 

Answer 3

父级元素不能包含含有浮动属性的子元素，是因为css塌陷吧，然后解决这种问题的方式好多都用clear：both 来清除浮动