cicistream

一些小记录

CSS布局--overflow:hidden的清除效果

CSS布局–overflow:hidden的清除效果

来自《精通CSS》阅读的思考:

原文使用两列的浮动布局,首先设置两列内容为float,并设置display:inline-block,以此防止IE中双外边距浮动产生的bug,然后在两个浮动元素的父元素应用了overflow:hidden

原文:因为这些元素是浮动的,它们不再在文档流中占据任何空间,这会导致页脚上升。为了避免这种情况,需要对父元素应用溢出方法,从而清理浮动元素。

overflow:hidden 的原义是超出的部分要裁掉隐藏
当父元素的高度没有显式设置,为默认值height:auto,且只包含浮动元素时,由于float元素脱离文档流,他的高度不计算在父元素中,正常的父元素height应该为0,但是在给父元素加上overflow:hidden后,进行裁剪前,父元素会首先计算height: auto;的真实高度,由于其触发了BFC,需要包含子元素,所以高度不是0,而是子元素高度。根据BFC规则浮动元素不仅没有被剪裁掉,还能达到清除浮动的效果。

详细介绍BFC(Block formatting context)的好文:
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_31231955/article/details/70141056
文章标签: css 布局
个人分类: CSS
上一篇DOM 编程艺术 实用代码段
下一篇我的技术阅读书单(实体书部分)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭