Why doesn't clear: right clear the right side of a paragraph element in a two columns text?

user_15797182 0
Viewed 36

I'm trying to understand float and I made a two columns of text:

* {
  box-sizing: border-box;
}

p {
  float: left;
  background: pink;
}

#p1 {
  width: 50%;
  clear: right;
}

#p2 {
  width: 50%;
}
<p id="p1">Paragraph 1.</p>
<p id="p2">Paragraph 2.</p>

Since I set #p1 to clear:right, I thought #p2 text would go below it, since in my understanding, clear:right says no other element should float at the right side of #p1.

The same happens if I set #p2 to float:right. They document looks the same, nothing happens.

I'm strugling to understand why doesn't #p2 text get out of #p1 side. Could someone explain me, please?

css-float css html
1 Answers

Clearing refers to getting below what has come before, not what comes after. Also, if each element has 50% of the width, there's really nothing to clear from the same side. You'd have to clear the opposite side or both sides.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p {
  float: left;
  width: 50%;
  background: pink;
}

#p1 {
  clear: right;
}

#p2 {
  float: right;
  clear: left;
}

#p3 {
  float: left;
  clear: both;
}
<p id="p1">Paragraph 1.</p>
<p id="p2">Paragraph 2 (cleared left).</p>
<p id="p3">Paragraph 3 (cleared both ways).</p>

user_12648040
Related