Float right changing position of next element-CodePudding

I have a simple HTML, one parent div, and two children. When I am styling one child with float set to right, the next child goes up and the margin-top doesn't apply to it, which I don't want.

Here is the sample code.

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

<div >
<div >

</div>
<div >
Text that goes up after float.
</div>
</div>

Can someone please suggest how to handle this situation?

Here is the

CodePudding user response：

Don't use float. float is deprecated. Please take note of this solution using 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 >
  <div >

  </div>
  <div >
    Text that goes up after float.
  </div>
</div>

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

  </div>
  <div >
    Text that goes up after float.
  </div>
</div>

CodePudding user response：

Try this code:

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

<div >
<div >

</div>
<div >
Text that goes up after float.
</div>
</div>

CodePudding user response：

You can use clear: both; in the element what has float: right; property.