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?
CodePudding user response:
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>