溢出如何：隐藏；与浮动一起使用[重复]答案

【问题标题】：how does the overflow:hidden; works with float [duplicate]溢出如何：隐藏；与浮动一起使用[重复]
【发布时间】：2021-11-11 21:47:45
【问题描述】：

最近我开始学习 css，在学习 float 时，我不明白如何溢出：隐藏；与浮子一起工作我试着去 w3schools 和 mdn 但我仍然不明白它是如何工作的

.parent{
    background-color: red;
    padding: 10px;
    overflow: hidden;
}
.parent div{
    background-color: #eee;
    float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/float.css">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
    </div>
    <p>this is a paragraph</p>
</body>
</html>

【问题讨论】：

developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/…
你应该检查css flexbox和css grid，而不是使用float。
我只是想了解它是如何工作的。

标签： html css

【解决方案1】：

overflow: hidden; 是一个 CSS 属性，它可以防止滚动条出现，即使它是必要的......

我将举一个使用浮点数的例子来说明它是如何工作的，

HTML

<div class='container'>
  <div id="div1"></div>
  <div id="div2"></div>
</div>

CSS

/* *{
  overflow:hidden;
} */

.container{
  width:108vw;
  height:100vh;
  background:red;
}

#div1{
  width: 600px;
  height: 400px;
  background: blue;
  float: left;
}

#div2{
  width: 400px;
  height: 600px;
  background: green;
  float: right;
}

这里，我故意让容器大于屏幕尺寸（显然是 100vh，100vw），所以滚动条出现了。现在我有两个带有浮点数和不同颜色的 div，所以你可以识别它们。要真正看到这些 div，必须向下并向右滚动；

这是我制作的笔的链接 https://codepen.io/codebyrudra/pen/XWaBOJr

现在，取消注释

*{
    overflow:hidden;
}

现在您可以看到滚动条消失了，您无法再完全滚动查看这些 div。

您也可以使用display:flex; 或display:grid; 尝试此属性，它会产生相同的结果。

希望这有帮助:)

【讨论】：

【解决方案2】：

overflow: hidden; 仅在您为该元素定义 width 和 height 时才具有可见效果，并且其内容通常会超出该宽度和高度：

（width的默认值为 100%，因此不一定必须在所有情况下都定义）

.parent{
    background-color: red;
    padding: 10px;
    overflow: hidden;
    width: 200px;
    height: 15px;    
}
.parent div{
    background-color: #eee;
    float: left;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/float.css">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
    </div>
    <p>this is a paragraph</p>
</body>
</html>

【讨论】：

我怀疑 OP 正在询问其类似于 clearfix 的行为。