我需要 2 个 div，其中一个向左浮动，因此当我们将窗口调整为一个小窗口时，第二个 div 将向下移动。
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>此代码将使第二个 div 与第一个 div 重叠，如果我在容器中添加 display:flex 它不会再重叠，但 div 大小会随窗口大小调整大小，第二个 div 不会向下.
怎么了？我需要我的 div 正好是 500px。 谢谢:)
最佳答案
据我了解，您想在调整浏览器大小后让第二个 div 下降。因此，您可以为此使用媒体查询:
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div:first-child {
float: left;
width: 500px;
height: 500px;
border: 1px solid red;
}
.container div:last-child {
width: 500px;
height: 500px;
border: 1px solid black;
}
@media (max-width: 500px) {
.container div:last-child {
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div>
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
我把两个div的样式分开了，去掉了float:left从内联样式。 <meta>对于媒体查询的工作也很重要。我用了clear:both从第二个 div 清除第一个 div 的 float ，从而不影响第二个 div。
我没有把它放在一个片段中，因为媒体似乎在那里不起作用，但在我的电脑上工作
关于html - 调整窗口大小时CSS float div重叠或不向下移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46680677/