Floating left and right, and clearing floats
RIGHT Note: Viewing the source code, notice that the right note was typed first in the code, but the "float left" attribute causes the left note to fill in that space.
LEFT NOTE: a <br> tag is inserted after the second of these notes with a style of "clear:both" to end the "floating" and allow the <hr> thin line divider to span the page. View the source.
RIGHT TWO: Just to show that a "class" can apply to more than one type of box, this time the "right" class is applied to a paragraph, not a div. A break tag with a "clear" attribute is added after the paragraph to end the right-floating and allow the next note to float to the left margin.
LEFT TWO: Quiz: Why is there more blue space around the type in this paragraph than in the previous one? Study the code to figure it out!
LEFT THREEWhy is there less blue space around the type in this paragraph than in the previous one? And why is it on the right? Study the CSS to figure it out!
Based on a demo at W3schools.