本文共 3281 字,大约阅读时间需要 10 分钟。
随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666)、博主微信(guyun297890152)、QQ技术交流群(183198395)。
overflow属性的作用是规定当内容溢出元素框时发生的事情,定义溢出元素内容区的内容会如何处理。
overflow有下面几种属性值,分别如下:
1.visible:默认值。内容不会被修剪,会呈现在元素框之外。
2.hidden:与visible相反,内容会被修剪,并且其余内容是不可见的。
这对应付使用动态的内容,而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此,请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。 比如有的用户设置他们的浏览器的默认字体比你预期的要大些,你会将一些文字推到盒子的外面然后完全的隐藏之……
3.scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
不论是否需要,用户代理都会提供一种滚动机制。因此即使元素框中可以放下所有内容也会出现滚动条,而且使用scroll将会同时产生水平和垂直两个滚动条,就算内容只需要其中一个。
4.auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。解决了scroll在不需要滚动条也会产生滚动条的问题。
5.inherit:规定应该从父元素继承 overflow 属性的值。
其中,overflow属性值中visible和hidden是对立的,scroll和auto是对立的。inherent是继承父级元素的overflow属性值,默认是scroll。
示例:
div { width:150px; height:150px; overflow:scroll; }
overflow还有个作用是清除浮动的影响,具体说就是清除包含块内子元素的浮动,我们先来看一个实例:
//html
// css.parent{ width:300px; background:#ddd; border:1px solid;} .child1{ width:100px; height:100px; background:pink; float:left;}.child2{ width:200px; height:50px; background:red;}
结果:
上面的例子中,我们没有设置.parent的高度,所以.parent的高度默认为auto。由于.child1设置了浮动,脱离了文档流,所以.parent中只有.child2这一个文档流元素。现在我们给.parent添加"overflow:hidden"
:
.parent{ overflow: hidden; }
结果:
我们看到,给父元素添加一句"overflow:hidden",就能让父元素包住这个脱离了文档流的浮动元素,换句话说,"overflow:hidden"可以清除包含块内子元素的浮动的影响。
现在我们看到了现象,可是原因是什么呢?
在解释这个问题之前,我们先了解一下BFC的概念。
BFC(Block Formatting Context),块级格式化上下文,它规定了内部的块级元素的布局方式,默认情况下只有根元素(即body)一个块级上下文。
1、BFC布局规则
2、创建一个BFC
首先我们要知道怎样创建BFC。一个BFC可以被显式触发,只需满足以下条件之一:
3、BFC的应用
1)、消除margin合并
在这篇博客中,我描述了相邻兄弟元素、父元素与第一个和最后一个子元素、空块元素的margin合并情况。那么对于发生margin合并的元素,我们怎样消除margin合并?
对于父子元素,我们可以通过设置padding、border、inline content、height、min-height、max-height等属性来消除;但是相邻的兄弟元素之间必出现margin合并,这时如果想要消除margin合并,又该怎么办?
我们首先要搞清楚为什么会发生margin合并。这些元素(包括兄弟、父子元素等)之间之所以会发生margin合并,是因为它们属于同一个BFC。所以,我们就知道怎么办了,只要让它们不属于同一个BFC不就可以了?
我们来看在这篇博客中举过的一个例子:
// html
// cssbody{ margin:0; padding:0;}.bro1{ width:300px; height:200px; background:#ddd; margin-bottom:30px;}.bro2{ width:200px; height:100px; background:pink; margin-top:20px;}
结果:
现在我们给.bro1新建一个BFC,并添加 overflow:hidden;
,修改代码如下:
// html
// css.special{ overflow:hidden; }
结果:
你看!margin合并消除了!
2)、包含浮动子元素
这也是我们今天的主要议题——为什么"overflow:hidden"能清除浮动的影响。
我们经常会在父元素里设置某个子元素浮动。浮动后,子元素脱离了文档流,使得父元素无法包住这个浮动的子元素。我们通常在父元素上设置一个clearfix
的伪元素来清除浮动;同样,我们可以利用BFC可以包含浮动这一特性来清除浮动,例子已经在本文开头讲过。 我们对本文开头的例子作一个分析:当给.parent设置"overflow:hidden"时,实际上创建了一个超级属性BFC,此超级属性反过来决定了"height:auto"是如何计算的。在“BFC布局规则”中提到:计算BFC的高度时,浮动元素也参与计算。因此,父元素在计算其高度时,加入了浮动元素的高度,“顺便”达成了清除浮动的目标,所以父元素就包裹住了子元素。
除了给.parent设置"overflow:hidden",我们还可以设置"display:inline-block"、"position:absolute"、"float:left"等方式来创建一个BFC,从而达到包裹浮动子元素的效果(具体使用哪种方法要看项目需求):
// css.parent{ /* 具体使用哪个要看界面设计的情况 */ /* overflow: hidden; */ /* display:inline-block; */ /* position:absolute; */ float:left;}
结果:
好了,关于这个问题就总结到这里。CSS的很多属性看似简单,深究起来才发现自己了解的仅仅只是冰山一角,前端之路,道阻且长啊!
参考资料:
转载地址:http://vstei.baihongyu.com/