css--overflow的使用和overflow:hidden详解

前言

　　你在前端写样式的时候遇到过需要设置滚动条的时候吗？或者你知道如何让父元素下面超出的子元素隐藏起来吗？那么本文主要记录一下前端在写 css 样式的时候经常遇到 overflow 属性的理解以及 overflow：hidden 的详细使用方法。同时面试时候也经常遇到这样的问题：谈谈你对 overflow 的了解。

正文

　　1.overflow 属性详解

　　首先声明一下基础的html代码片段和css样式

     <div class="wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
      </div>

        .wrap{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            overflow: visible;
        }
        .item{
            width: 200%;
            height: 50px;
            border: 1px solid black;
        }

　　（1）overflow：visible ，该属性的默认值，当父元素宽度或者高度不够的时候，子元素会呈现在父元素外面。结果如下：

　　（2）overflow：scroll，当父元素宽高不够时，子元素内容会被裁剪，此时出现滚动条，超出的部分内容通过滚动条显示。若想要达到隐藏滚动条的效果，可以给父元素设置css属性：.wrap::webkit-scrollbar{ display : none ; }。

　　（3）overflow：auto，该属性效果同上，子元素的内容会被裁剪，此时出现滚动条，超出的部分通过滚动条显示。效果如下：

 

 

　　（4）overflow ：hidden，当父元素高度不够时候，子元素会被裁剪，超出的部分不可见。效果如下：

　　2.overflow：hidden常见用法：

　　（1）隐藏溢出部分，若子元素为文本元素，设置多余文字隐藏边显示 ... 省略符号。

    <div class="wrap1">
      给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
    </div>
    .wrap1 {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

　　没有设置overflow，以及后面两条css属性情况下文字会换行显示，设置了之后出现省略符号，效果如下：

 

　　

 

　　（2）清除浮动

　　首先理解什么时浮动？浮动提出的本质是为了解决图片的文字环绕问题，意思就是设置图片为浮动元素，文字环绕该图片展现的问题。float 元素只是脱离了文档流的 dom 空间，但是还占据着文字空间，使用 float 脱离文档流时，其他盒子无视这个元素，但是其他盒子内的文本依然会为这个元素让出位置。知道了浮动之后，来了解下接触浮动。先来看下代码和效果：

    <div class="wrap2">
      <div class="wrap2-item1">我是浮动元素item1的内容</div>
      <div class="wrap2-item2">我是第二个元素的内容</div>
    </div>
    <div class="others">我是其他部分</div>
    .wrap2 {
        width: 200px;
        border: 2px solid red;
      }
      .wrap2-item1 {
        float: left;
        clear: both;
        height: 200px;
        width: 50px;
        border: 2px solid black;
      }
      .wrap2-item2 {
        height: 100px;
        width: 100px;
        border: 2px solid green;
      }
      .others {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }

　　运行结果如图：

　　通常情况下，我们不会给父元素设置高度，只能由子元素的高度撑开，相当于给父元素设置高度值为auto,入下面的代码，此时父元素的高度被wrap2-item2这个盒子的高度撑开。给子元素设置了float ，使得item2元素让出位置，隐藏了item2的内容显示在剩余的位置中，但是此时item的浮动导致影响了其他部分的渲染，要想 解决这个问题就需要清除浮动元素对别的其他部分的影响。代码中给 warp2 这个父元素添加overflow:hidden即可。结果如下：

　　由于没有给父元素设置高度，父元素没有包住item1这个浮动子元素，造成了其他部分顶上去了，产生了高度塌陷问题，设置overflow:hidden之后，清除了item相对于包裹元素的浮动，从而父元素高度随子元素高度自适应，此时就不会影响到其他部分的盒子了。

　　（3）解决外边距塌陷问题：

　　代码及效果如下，要想使得子盒子设置margin-top 为20px的效果，导致了父元素的上边距为了20px,没有实现预期的效果，

    <div class="line"></div>
    <div class="wrap3">
      <div class="wrap3-item">我是子元素内容</div>
    </div>
    .line {
        width: 100%;
        height: 1px;
        margin-top: 10px;
        background-color: black;
      }
      .wrap3 {
        width: 200px;
        background-color: skyblue;
      }
      .wrap3-item {
        margin-top: 20px;
        width: 100px;
        height: 50px;
        background-color: tan;
      }

　　效果如图：　　　　　　

　　这就是高度塌陷的结果，父元素没有设置高度，跟随了子元素的高度，子元素设置上边距导致父元素出现了上边距，而子元素没有效果。要想解决这种高度塌陷的问题常用的办法如下：1.给父元素设置边框，2.给父元素设置overflow：hidden即可。两者选其一即可，最终效果如下：

 　　　　　　　　　　　　

　　（3）遇到的疑惑如下：

　　              

　　上面的问题是为什么？浏览器在渲染数字的时候，如果数字一行放不下的情况，会自动放在下一行，而纯文字就没有这种问题。

总结

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。