关于overflow:hidden清除浮动的一些理解

关于overflow:hidden清除浮动的一些理解

引用星星之火M的分析
和我自己在使用时的一些现象得出。

首先是含义。overflow:hidden -------给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。

在清除浮动中的作用

父级元素不设置高度时,高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0。这时就会存在一个页面坍塌的问题,如下图,footer应该在页面最下端,但是因为中间模块的父元素高度为0,向上顶。
关于overflow:hidden清除浮动的一些理解
<div class="header">#header</div>

<div class="container">
<div class="column center"></div>
<div class="column left"></div>
<div class="column right"></div>
</div>

<div class="footer">#footer</div>
如果在三个div标签center、left、right的父元素container中加上overflow:hidden
关于overflow:hidden清除浮动的一些理解