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

原创 2017年04月12日 11:30:52

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

探究CSS属性overflow:hidden的作用:隐藏溢出和清除浮动

1、首先说一下overflow的定义:overflow属性规定当内容溢出元素框时发生的事情。2、overflow属性可能的值: 3、overflow:hidden的作用:1)、对超出尺寸进行裁切,也...

CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

CSS清除浮动_清除float浮动 - DIVCSS5 http://www.divcss5.com/jiqiao/j406.shtml

CSS 的overflow:hidden 属性详细解释

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。一提到清除浮动,我们就会想到另外一个CSS样式:...

论css中如何挣脱overflow:hidden;的限制

前言 这个问题是在处理苏宁平台的官方旗舰店模板遇到的。苏宁限定的页面显示区域宽度为990px。模板可以自定义,但是嵌入的代码被包含在一个div里面。这个div被奇葩的设置了内嵌样式overflow...

【html&css】overflow :hidden详细解释

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。一提到清除浮动,我们就会想到另外一个CSS样式:...

CSS 的overflow:hidden 属性详细解释

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。一提到清除浮动,我们就会想到另外一个CSS样式:...

CSS overflow:hidden 属性含义

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。一提到清除浮动,我们就会想到另外一个CSS样式:...

CSS中 overflow:hidden 的作用

功能1、隐藏溢出 在IE6下,当子容器的宽高超出父容器时,父容器就会被撑开来。 要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容...

css overflow:hidden为什么会失效

现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?我们知道,overflow属性值有这几种: visible:声明内容不会被剪裁。比如...

CSS overflow: hidden的例子

初学web前端,看到一些教程对overflow: hidden;的描述是隐藏溢出,但实际运用中,却发现不仅仅是字面意义上那么简单。网上查到一些资料说overflow: hidden;还有清除浮动的效果...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)