Css 浮动：在其他元素上左重叠

我正在努力让自己明白过来，所以首先，让我向你们展示我已经做了什么：

以下是我的HTML页面摘录：

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

<p>
 warning 1
</p>

<p>
warning 2
</p>

其中给出了输出：

我想要这样的东西：

div和2p之间没有重叠

编辑

---

我想保留div的边距，一般来说，元素是如何放置的，如果可以在div和两个p之间添加边距，那就更好了：）

我使用css网格为您提供了一个简单的解决方案。 唯一的变化是，通过这种方式，您实际上可以更轻松地修改布局，而不是使用浮动。请检查此处的代码：

1.
2.
3.
#内容{
最大宽度：960像素；
保证金：自动；
显示：网格；
网格模板列：重复（3，1fr）；
网格模板行：重复（3，最小值（150px，自动））；
栅隙：10px；
}
.一{
网格行：1/3；
}
.二{
网格柱：2/5；
}
.三{
网格柱：2/5；
}

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

#随机分区{
背景：#fff；
填充：20px；
字体大小：25px；
右边距：15px；
宽度：150px；
浮动：左；
} 
.clearfix:：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
p{
背景颜色：橙色；
}

随机短信

警告1


警告2

好吧，一位朋友告诉我一个可以接受的解决方案，我真的不想承担责任，但我必须结束这件事

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

html:

结果:

---

现在我只需要对边距进行一些处理，以获得所需的输出：）

您正在将边距应用于float元素。删除它好吧，如果我这样做，我再也看不到橙色了，所以它更好，但我想保留marginI抱歉，但这不是我想要的，我想在div的右侧添加警告我已经更新了响应，并根据您的要求进行了一些小的更改。我真的不明白clearfix的意义。从我的例子来看，如果我只是用“右边距”替换“右边距”，我得到的结果与您相同。（因此div仍然与p重叠，只是我看不到它。这很有趣，但我不能对HTML做太多修改，尤其是我的p有不同的类。然而，也许我可以只使用2个单元格（一个单元格有我的div，一个单元格内有2个p）…但它需要很多修改。。。

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

}
p{
  background-color: orange;
}

    <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;
}

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

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

#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;
}