如何将元素保持在浮动元素之下？ [复制]答案

【问题标题】：How can I keep an element under a floated one? [duplicate]如何将元素保持在浮动元素之下？ [复制]
【发布时间】：2018-07-07 03:39:04
【问题描述】：

这是我的代码：

.one, .two{
  border: 1px solid;
}

.one{
  float:left;
  display: block;
  clear:both;
}

.two{
  display: block;
  width: 100%;
}

<div class="one">something</div>
<div class="two">something else</div>

如您所见，这两个元素彼此相邻。虽然我想把它们放在一起。我的意思是div.two 应该在div.one 的底部。注意到div.one 应该有float:left 属性（我无法删除它）。

clear:both 和 display:block 也不能按预期工作。知道我该怎么做吗？

【问题讨论】：

这里有一些关于浮动行为以及如何处理它的简单读物css-tricks.com/all-about-floats

标签： javascript jquery html css

【解决方案1】：

只需将 clear 添加到第二个 div，见下文

.one, .two{
  border: 1px solid;
}

.one{
  float:left;
  display: block;
  clear:both;
}

.two{
  display: block;
  width: 100%;
clear: both;
}

<div class="one">something</div>
<div class="two">something else</div>

【讨论】：

好的，谢谢 .. 点赞。只是另一个相关的问题。为什么margin-too: 5px; 上的div.two 不适用？
margin-too 应该是 margin-top
@Sushanth-- 是的，我就是这个意思。但它不起作用jsfiddle.net/dgwbvxuk
@martin，在您浮动某些内容后，它不再用于查找其下方元素的边距。你可以在这里找到正确的解释：stackoverflow.com/questions/1883414/…
@MartinAJ 检查我在下面发布的可能解决方案。

【解决方案2】：

您可以在此用例中使用 flexbox 布局。 Margin 在这方面也表现得很好，并且比使用 floated 元素更灵活。

.one,
.two {
  border: 1px solid;
}

.one {
  align-self: baseline;
}

.two {
  flex-basis: 100%;
  margin-top: 125px;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

<div class="wrapper">
  <div class="one">something</div>
  <div class="two">something else</div>
</div>

你只有一个父容器充当 flex 容器，两个 div 充当它们的子容器。

【讨论】：