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

Question

我有一个简单的HTML，一个parentdiv，两个children。当我将 float 设置为右侧的 child 样式时，下一个 child 上升并且 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: right; 属性.

的元素中使用 clear: both;

Answer 2

不要使用 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 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>

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

Float right changing position of next element

html

css

flexbox

css-position

css-float