详解为什么设置overflow为hidden可以清除浮动带来的影响

当一个元素内部包含浮动元素时，这个内部包含浮动元素的元素高度将会塌陷，导致该元素的高度不符合预期，在布局时可能会出现问题。

而设置overflow属性为hidden可以清除浮动带来的影响，让元素的高度正常显示，原因是：当元素的overflow属性被设置为非visible时，它会生成一个新的BFC(Block Formatting Context)，而BFC具有如下特性：

BFC区域不会与浮动元素重叠，而是会紧紧包裹住它们；
BFC区域会自动清除内部浮动元素的影响，不需要额外的处理，可以避免父元素崩溃的问题；
BFC区域不会影响外部元素的布局，外部元素也不会影响BFC区域内部的布局；

这个特性恰好能够用来清除浮动带来的影响。如果将浮动元素的容器元素的overflow属性设置为hidden，那么容器元素就会生成新的BFC区域，从而可以将浮动元素包裹住，并且不会继承来自其父元素的高度塌陷问题。

以下是两个示例说明：

示例1：清除浮动带来的高度塌陷现象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例1：清除浮动带来的高度塌陷现象</title>
    <style>
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
            margin-right: 20px;
        }
        .container {
            border: 1px dashed black;
            overflow: hidden; /* 为了清除内部浮动影响 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="float-left"></div>
        <div class="float-left"></div>
        <div class="float-left"></div>
    </div>
</body>
</html>

在该示例中，我们创建了一个div元素作为浮动元素的容器，并将三个大小相同的红色浮动方块放置在其中。由于浮动方块脱离了正常文档流，容器元素的高度无法被撑起，从而出现了高度塌陷的问题。但是，我们在容器元素中设置了overflow: hidden，这样容器元素就生成了一个新的BFC区域，从而可以自动清除所有内部浮动元素的影响，实现了清除浮动的目的，并让容器元素的高度正常显示。

示例2：实现同一高度两列布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例2：实现同一高度两列布局</title>
    <style>
        .float-left {
            float: left;
            width: 200px;
            min-height: 200px; /* 不要使用height，因为height值是固定的，若是内容超出则还是会出现高度塌陷 */
            background-color: red;
            margin-right: 20px;
            margin-bottom: 20px;
            box-sizing: border-box;
            padding: 10px;
        }
        .container {
            overflow: hidden; /* 为了清除内部浮动影响 */
        }
        .left {
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="float-left left">
            <p>这是左侧内容的部分，可以放置很多文本和图片，来模拟多行高度的撑起效果，以实现同一高度的两列布局。</p>
        </div>
        <div class="float-left">
            <p>这是右侧内容的部分，同样可以放置很多文本和图片，来模拟多行高度的撑起效果。</p>
            <p>这是右侧部分的另一行文本。</p>
            <p>这是右侧部分的又一行文本。</p>
        </div>
    </div>
</body>
</html>

在该示例中，我们创建了一个div元素作为浮动元素的容器，并将两个大小相同的红色浮动方块放置在其中。这两个方块分别代表了同一高度两列布局中的左列和右列。我们在容器元素中设置了overflow: hidden，这样就可以清除内部浮动元素的影响，让两个浮动方块完美对齐，并实现同一高度两列布局的效果。在布局时，需要注意设置盒模型为border-box，并手动指定min-height属性来实现高度的灵活自适应。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解为什么设置overflow为hidden可以清除浮动带来的影响 - Python技术站