float:left 重叠在其他元素上答案

【问题标题】：float:left overlap on other elementsfloat:left 重叠在其他元素上
【发布时间】：2025-12-23 14:55:11
【问题描述】：

我正在努力让自己清楚，所以首先，让我向您展示我已经完成的工作：

这是我的 HTML 页面的摘录：

<div id="random_div">
random text message
</div>

<p>
 warning 1
</p>

<p>
warning 2
</p>

还有我的 CSS：

#random_div {
  background: #fff;
  padding: 20px;
  font-size: 25px;
  margin: 15px;
  width: 150px;
  float: left;

}
p{
  background-color: orange;
}

给出输出：

我想要这样的东西：

div 和 2 p 之间没有重叠的地方。

编辑我想保留div的边距，一般来说，元素的放置方式，如果可以在div和两个p之间添加边距，那就更好了:)

【问题讨论】：

您正在对浮动元素应用边距。删除它
好吧，如果我这样做，我就看不到橙色了，所以更好，但我想保留那个边距

标签： css css-float

【解决方案1】：

这是因为您没有清除浮动。用 clearfix 类包装浮点数。

#random_div {
  background: #fff;
  padding: 20px;
  font-size: 25px;
  margin-right: 15px;
  width: 150px;
  float: left;
} 

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

p{
  background-color: orange;
}

<div class="clearfix">
  <div id="random_div">
  random text message
  </div>
  <div>
<p>
 warning 1
</p>

<p>
warning 2
</p>
  </div>
  
</div>

【讨论】：

对不起，这不是我想要的，我想在 div 的右边有警告
我已经更新了响应，并根据您的要求进行了一些小改动
我真的不明白你的 clearfix 的意思。从我的例子中，如果我只是用“margin-right”替换“margin”，我会得到和你一样的结果。（所以div还是和p重叠的，只是我没看到。

【解决方案2】：

我使用 CSS 网格为您提供了一个简单的解决方案。唯一的变化是，您可以更轻松地实际修改布局，而不是使用浮点数。在此处查看代码：https://codepen.io/lukagurovic/pen/zYYQJNv

    <div id="content">
       <div class="one">1</div>
       <div class="two">2</div>
       <div class="three">3</div>
    </div>


#content {
    max-width: 960px;
    margin: auto;
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, minmax(150px, auto));
    grid-gap: 10px;
}
.one {
    grid-row: 1 / 3;
}
.two {
    grid-column: 2 / 5;
}
.three {
    grid-column: 2 / 5;
}

【讨论】：

这很有趣，但我不能对 HTML 进行太多改动，尤其是我的 p 有不同的类。但是，也许我只能将它与 2 个单元格一起使用（一个单元格带有我的 div，1 个单元格带有 2 p 内部）......但它需要很多修改......

【解决方案3】：

好的，所以一位朋友告诉了我一个可以接受的解决方案，我真的不想承担责任，但是，我必须关闭它。

解决方案是使用 flex-box 而不是 float，这并不是我想要做的。

html:

<div class='wrapper'>
  <div id="random_div">
    random text message
  </div>
  <div class='message'>
    <p>
     warning 1
    </p>

    <p>
    warning 2
    </p>
  </div>
</div>

css:

#random_div {
  background: #fff;
  padding: 20px;
  font-size: 25px;
  width: 150px;
  margin: 15px;
}

p{
  background-color: orange;
  margin-right: 5px;
}

.wrapper {
  display: flex;
  align-items: center;
}

.message {
  flex-grow: 1;
}

结果：

现在我只需要稍微调整一下边距即可获得所需的输出:)

【讨论】：