向右浮动改变下一个元素的位置

Question

我有一个简单的 HTML、一个父 div 和两个子 div。当我将

float

设置为右侧的一个子元素的样式时，下一个子元素会上升，并且

margin-top

不适用于它，这是我不想要的。

这是示例代码。

.inner1 {
  width: 50%;
  height: 100px;
  border: 5px solid red;
  float: right;
}

<div class="outer">
<div class="inner1">

</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>

有人可以建议如何处理这种情况吗？

这是JSFiddle

我希望输出是这样的

Answer 1

不要使用

float

。

float

已弃用。请使用

flex

记下此解决方案。

.outer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
}
.inner1 {
  width: 50%;
  height: 100px;
  border: 5px solid red;
}

.inner2 {
  width: 50%;
  text-align: center;
}

<div class="outer">
  <div class="inner1">

  </div>
  <div class="inner2">
    Text that goes up after float.
  </div>
</div>

片段#2

.outer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
}
.inner1 {
  width: 50%;
  height: 100px;
  border: 5px solid red;
}

.inner2 {
  width: 50%;
}

<div class="outer">
  <div class="inner1">

  </div>
  <div class="inner2">
    Text that goes up after float.
  </div>
</div>

Answer 2

您可以在具有

clear: both;

属性的元素中使用

float: right;

。

Answer 3

试试这个代码：

.outer{
        display:flex;
        flex-direction:column;
        align-items:flex-end;
      }
.inner1 {
         width: 50%;
         height: 100px;
         border: 5px solid red;
        }
.inner2{
       width: 50%;
  }

<div class="outer">
<div class="inner1">

</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>