详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

Markdown 格式是一种轻量级的标记语言，用起来可以快速简洁地写出漂亮的排版。不过它并不是专门为 web 设计而设计的，而我们在编写网站的时候，所需要的样式效果却远不止于此。其中一条常用的样式效果就是overflow:hidden，下面我将会介绍这个样式效果的作用以及用法。

什么是 overflow:hidden？

overflow:hidden是一种 CSS 样式，它的作用是使一个元素的内容在超出其容器尺寸的时候被隐藏。这种隐藏方式被称为“溢出隐藏”。如果一个元素的内容太长、图片太大、或者浮动太多超过了容器的尺寸限制，这时可以通过设置overflow:hidden可达到隐藏元素内容的效果。

为什么使用overflow:hidden？

1. 溢出隐藏

使用overflow:hidden可以在容器内固定住包含元素，防止元素溢出容器范围而影响其他内容或破坏该容器的布局。如下面这个例子：

<style>
    .wrap {
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    .inner {
        width: 200px;
        height: 200px;
        background-color: lightblue;
    }
</style>

<div class="wrap">
    <div class="inner"></div>
</div>

在上述代码中，div.wrap容器的宽度和高度都是 100px，而其内部包含了一个div.inner元素，其宽度和高度均为 200px。此时可以发现，虽然div.inner元素的宽和高大于父容器，但是因为使用了overflow:hidden样式，使得div.inner元素只显示在div.wrap内容区域内，而不会影响到其他内容的显示。

1. 清除浮动

另一种使用overflow:hidden的方式是在父容器中使用它来清除浮动。在使用浮动定位的元素时，有时候它们会将父容器撑大，使得后面内容的布局异常。当遇到这种情况时，可以在父容器中设置overflow:hidden使得浮动元素被包含，同时也不会被看到。如下面这个例子：

<style>
    .clearfix {
        overflow: hidden;
    }
    .float-left {
        float: left;
        width: 50%;
        height: 100px;
        background-color: lightgreen;
    }
</style>

<div class="clearfix">
    <div class="float-left"></div>
    <div class="float-left"></div>
</div>

在上述代码中，.clearfix元素作为父容器，它里面还包含了两个浮动在左边的块级元素。由于它们浮动后将父容器宽度撑大，使得后面的元素显示不正常。而在这里通过设置.clearfix元素的overflow:hidden样式，可以让它内部的浮动元素被包含，同时也不会影响其他元素的布局。

1. 解决外边距塌陷

外边距塌陷指的是相邻两个元素之间的 margin 出现塌陷，导致布局不正确。在使用overflow:hidden的时候，它可以起到一定的边距塌陷修复作用。如下面这个例子：

<style>
    .container {
        overflow: hidden;
    }
    .box {
        width: 100%;
        height: 50px;
        margin: 10px 0px;
        background-color: lightblue;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

在上述代码中，.container元素使用了overflow:hidden样式，同时里面包含了两个.box元素，它们之间设置了间隔 margin: 10px 0px;，此时这两个元素之间的 margin 就不会折叠，从而达到间隔效果。

总结

overflow:hidden样式的使用可以让我们避免元素溢出、修复浮动元素布局、解决元素 margin 的塌陷、实现弹性布局等等。但其也有着一定的限制，比如某些情况下可能会隐藏内容，或者让容器内的浮动元素变形等。在使用时需要根据实际需求进行取舍和合理使用。