CSS overflow属性详解
overflow定义:超出部分内容的显示方式。
overflow有4个值,我们先来看看每个取值的基本作用和效果。
overflow:visible; 默认值,超出部分正常显示(正常超出显示)。
overflow:hidden; 超出部分隐藏(被修剪)不显示。
overflow:auto; 超出部分自动,如果横向或者纵向内容超出,不会在区域外显示,会出现横向或者纵向滚动条。
overflow:scroll; 与overflow:auto;类似,但是不管超没超出横纵向都会出现滚动条。
overflow:inherit; 继承父元素的overflow属性。
接下来让我们来看看各个overflow取值的效果吧。
overflow:visible;
<!-- html代码 -->
<section>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit, obcaecati.</p>
<p>Repudiandae id numquam aliquid ex in molestiae? Illum, a quod.</p>
<p>Voluptas est, in dolore maxime ex odio tenetur architecto qui.</p>
<p>In repudiandae neque architecto autem hic, molestiae obcaecati impedit nam?</p>
<p>Facere rem voluptas id excepturi impedit accusantium pariatur aperiam sed!</p>
</section>
/* CSS样式 */
section{
width: 300px;
height: 300px;
background-color: coral;
border: 10px dashed lightskyblue;
}
可以看到文字竖直方向已经超过section区域,由于没有设定overflow的值 所以overflow为默认值,超出部分正常超出显示。
overflow:hidden;
/* CSS样式 */
section{
width: 300px;
height: 300px;
background-color: coral;
border: 10px dashed lightskyblue;
overflow: hidden;
}
更改overflow属性值为hidden后,可以看见超出部分被裁剪不显示。
overflow:auto;
/* CSS样式 */
section{
width: 300px;
height: 300px;
background-color: coral;
border: 10px dashed lightskyblue;
overflow: auto;
}
更高overflow属性值为auto后,可以看到由于竖直方向超出,所以出现滚动条,可以滑动看到所有内容。
overflow:scroll;
/* CSS样式 */
section{
width: 300px;
height: 300px;
background-color: coral;
border: 10px dashed lightskyblue;
overflow: scroll;
}
更改overflow属性值为scroll后,横竖都出现滚动条(无论内容是否超出)。
overflow的特殊用法。
当overflow的取值不是默认值的时候,就会创建BFC,从而起到一些独特的作用。
BFC:Block Format Context (块级格式化上下文) 它是一块独立的渲染区域。
BFC渲染区域:这个区域是由某个html元素创建,以下元素会在其内部创建BFC区域:
根元素
浮动和绝对定位
overflow不等于visible的块盒
BFC的作用:
1、消除浮动,自动高度会计算浮动元素。
2、它的边框盒不会与浮动元素重叠。
3、不会和它的子元素进行外边距合并。
下面让我们来看看overflow通过创建BFC得到的特殊效果。
overflow消除浮动
<!-- html代码 -->
<article>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</article>
/* CSS样式 */
article{
width: 600px;
background-color: coral;
border: 10px solid lightcoral;
/* overflow: hidden; */
}
section{
height: 100px;
width: 100px;
background-color: lightskyblue;
border: 5px solid slateblue;
float: left;
font-size: 30px;
text-align: center;
line-height: 100px;
}
可以看到1234section为article的子元素,在设置float:left;后article高度塌陷,只有边框显示。
在我们取消overflow:hidden;注释后,article设置overflow:hidden;属性,创建bfc。
在设置父元素overflow:hidden;后。可以看到结果我们没有设置父元素的高度,子元素浮动也不会造成父元素的高度塌陷。
overflow 取消边框盒与浮动元素重叠
<!-- html代码 -->
<aside></aside>
<section>
lorem50
</section>
/* CSS样式 */
aside{
width: 400px;
height: 500px;
background-color: lightcoral;
float: left;
}
section{
max-height: 500px;
border: 5px solid lightgreen;
/* overflow: hidden; */
}
可以看到浮动元素覆盖掉了section区域的边框。
在设置overflow属性不为默认值创建BFC之后
可以看到边框盒没有被浮动元素遮挡。这种方式可以实现左右布局。
overflow取消父子元素外边距合并
<!-- html代码 -->
<article>
<section>
</section>
</article>
/* CSS样式 */
article{
width: 500px;
height: 500px;
background-color: lightgreen;
margin: 0 auto;
/* overflow: hidden; */
}
section{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: lightpink;
margin-top:200px;
}
可以看到,当我们没有创建BFC时,设置子元素section的上外边距,article也被带着向下移动。这就是我们常见的外边距合并。
在我们更改overflow的值不为默认值创建BFC后。
article创建了BFC 成为一块独立的渲染区域。所以不会和section进行外边距合并。
因此在我们进行开发的时候,常常会用到overflow:hidden;来解决这类型的问题。