Float Demo


Block elements with floats

Floating paragraph elements to the left

This is a long line of text that I'm typing so I can see what happens to the paragraph block elements that follow it, which are each floated to the left.

Block 1

Block 2

Block 3


Floating paragrpah elements to the right

This is another long line of text, after a couple breaks. I want to see what it does! The paragraphs that follow are each floated to the right.

Block 4

Block 5

Block 6

Block 7

Floating inline elements

What happens if you float an inline element?

Anchor elements without floats

Google Yahoo Bing
<3>Float anchor elements to the right This is just a line of text. Each of the three following anchor elements is floated to the right. Google Yahoo Bing

Float anchor elements to the left

Now we'll float each of them to the left Google Yahoo Bing