react js float clear property

Question

I was trying to design this:

the css used for this is:

.body {
  border: 5px solid red;
  padding: 10px;
}
.one {
  float: right;
  height: 100px;
  width: 100px;
}
.two {
  float: left;
  height: 100px;
  width: 100px;
}
p {
  clear:right;
}

but if i use this code the output is:

but it works fine if i remove

p {
clear:right;
}

Answer 1

The clear property controls the flow next to floated elements. when you set clear:right; it will be pushed below the right floated elements;