Question

这是我的代码：

.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均无法正常工作。知道我该怎么做吗？

Answer 1

只需将清除添加到第二个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>

Answer 2

您可以在此用例中使用 flexbox 布局。保证金在此方面也发挥出色，并且比使用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充当其子容器。

如何在浮动元素下保留元素？

2 个答案: