详解为什么设置overflow为hidden可以清除浮动带来的影响
1.问题起源 在平时的业务开发写CSS中，为了满足页面布局，元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题，但是也带了一些副作用影响，比如，父元素高度塌陷，我们有好几种可以清除浮动的方法，最常用的就是设置父元素的overflow:hidden这个属性，每次在写代码的时候总是这样写，但是，自己从没深度思考过这些写为什么能够清除浮动，最近，自己也查阅了一些资料，谈谈自己的理解。 2.情景再现 先上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style> .container{ border: 1px solid # 000 ; background: #0f0; } .child{ float : left; } </style> </head> <body> <div class="container"> <div class="child"> 你好 </div> </div> </body> </html> 代码很简单，就是父元素container里面包含了一个子div元素child，然后我们使子元素的div向左浮动，结果来看，父元素只显示了四个方向边框的高度，背景颜色未显示，这是因为子元素浮动脱离文档流造成父元素高度塌陷。