深入理解CSS overflow:hidden——溢出，坍塌，清除浮动

溢出（Overflow）

当元素的内容超出了容器的范围时，我们需要处理这种溢出现象。此时，我们可以使用CSS属性overflow来控制其内容的显示方式。

overflow:hidden

使用overflow:hidden可以隐藏元素的溢出内容，这通常用于父元素中有绝对定位子元素时的处理。例如，在一个包含了绝对定位元素的div中，如果父元素不加overflow:hidden，那么绝对定位元素就会因为超出父元素范围而出现不预期的效果。因此此时可以在父元素中加入overflow:hidden来隐藏其溢出内容。

示例代码：

<div class="parent">
    <div class="child"></div>
</div>

.parent { 
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.child {
    position: absolute;
    background-color: red;
    left: 100px;
    top: -100px;
    width: 50px;
    height: 50px;
}

效果：父元素中会隐藏子元素超出父元素范围的部分，使其只显示在父元素内部。

overflow:scroll

使用overflow:scroll可以将元素的溢出内容以滚动条的形式显示出来，这通常用于内容过长而需要进行滚动查看的情况。例如，当一个元素中内容的高度超出了其指定的高度时，可以将其加上overflow:scroll来实现滚动查看。

示例代码：

<div class="container">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Donec a diam lectus. Sed sit amet ipsum mauris.
        Maecenas consectetuer gravida velit.
    </p>
</div>

.container{
    width:400px;
    height:100px;
    overflow:scroll;
}

效果：当p元素中的内容高度超出容器指定的高度时，会出现垂直滚动条，以便于查看全部内容。

坍塌（Collapse）

当元素与其兄弟元素之间不包含margin或border时，它们的高度会被自动合并，即发生了坍塌现象。例如，当两个相邻的div无间距时，它们的高度会自动合并，并呈现为一个div的高度。

清除坍塌

因为坍塌现象可能引起不必要的布局问题，导致布局效果与预期不符，所以我们需要清除坍塌。可以在元素中使用overflow:hidden或为其添加一个1像素的border来清除坍塌。

示例代码：

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>

.parent {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    overflow: hidden; /*清除坍塌*/
    margin-bottom: 20px;
}
.child {
    height: 50px;
    background-color: red;
}

效果：每个父元素都包含一个子元素，但是当父元素不清除坍塌时，两个父元素的高度将会合并，只显示出一个父元素的高度。而当父元素清除了坍塌时，两个父元素的高度不再合并。

清除浮动

当元素浮动时，它的父元素会因为该元素的高度消失而造成不必要的问题，如布局紊乱等。我们需要清除浮动以解决这些问题。使用clear:both会造成元素在父元素下方换行来清除浮动，而使用overflow:hidden也可以清除浮动并不会引起元素的换行。

示例代码：

<div class="parent">
    <div class="float-left"></div>
    <div class="float-right"></div>
    <div class="clear"></div>
</div>
<div class="parent">
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>

.parent {
    width: 400px;
    height: 200px;
    border: 1px solid #000;
    overflow: hidden; /*清除浮动*/
    margin-bottom: 20px;
}
.float-left {
    float: left;
    width: 100px;
    height: 50px;
    background-color: red;
}
.float-right {
    float: right;
    width: 100px;
    height: 50px;
    background-color: blue;
}
.clear {
    clear: both; /*清除浮动*/
}

效果：当父元素清除浮动时，两个子元素会显示在父元素内部而不再产生父元素重叠的问题。而当父元素未清除浮动时，两个子元素会重叠产生不必要的布局问题。