CSS3中 overflow:hidden；作用（创建BFC）

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;来解决这类型的问题。