float:left 与其他元素重叠

Question

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

这是我的 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 页之间没有重叠。

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

Answer 1

我使用 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;
}

Answer 2

这是因为您没有清除浮动。用 clearfix class.

包裹浮点数

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

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

结果：

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

float:left 与其他元素重叠

float:left overlap on other elements

css

css-float