css “overflow:hidden“ 清除浮动

overflow:hidden"可以溢出隐藏，即当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。
"overflow:hidden"还可以清除包含块内子元素的浮动。

 

显示结果：

 

css中没有设置.parent的高度，所以.parent的高度默认为auto。

.child1设置了float：left浮动，脱离了文档流，所以.parent中只有.child2这一个文档流元素。

现在我们给.parent添加"overflow:hidden"

结果显示

 

 由上可知.parent添加了"overflow:hidden"，是整个div包住了浮动的child1

也就是说"overflow:hidden"可以清除包含块内子元素的浮动的影响。

"overflow:hidden"还可以清除margin合并。

 

结果显示：margin合并了

 添加新样式.hidden设置为"overflow:hidden"

显示结果：margin合并消除了

 

"overflow:hidden"，

"display:inline-block"

"position:absolute"

"float:left"等都可以实现包裹浮动子元素的效果（具体使用看项目需求）

 

总结
以上例子体现了：

BFC的布局规则

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

如何创建BFC

• 1、float的值不能是none，"float:left"，"float:right"；
• 2、position的值不能是static或者relative，"position:absolute"；
• 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex；
• 4、overflow的值不能是visible，"overflow:hidden"，