[cl1] The image which occurs at the beginning of this paragraph should be floated to the left, and the text is the paragraph should "wrap around" the image. This is the kind of behavior we've come to expect from Web browsers over the years.
The style declarations contained within this page:
IMG {float: right;}
IMG.cl1 {float: left;}
IMG.cl2 {float: right;}
IMG.cl3 {float: none;}
P.cl4 {float: left; width: 10em; background: yellow;}
SPAN.cl5 {float: right; width: 7em; background: yellow;}
[cl1] The image which occurs at the beginning of this paragraph should be floated to the left, and the text is the paragraph should "wrap around" the image. This is the kind of behavior we've come to expect from Web browsers over the years.
[cl2] The image which occurs at the beginning of this paragraph should be floated to the right, and the text is the paragraph should "wrap around" the image. This is the kind of behavior we've come to expect from Web browsers over the years.
[cl3] The image which occurs at the beginning of this paragraph should not be floated at all, and therefore the text is the paragraph should not "wrap around" the image. Instead, the image should appear as an inline element at the beginning of the paragraph. This is the kind of behavior we came to expect from Web browsers in the early years.
[cl4] This paragraph has been floated to the left, and has a width of ten (10) em with a yellow background.
This is an ordinary, unstyled paragraph. It should "wrap around" the previous paragraph, the one with a class of 'cl4', due to the floatation of the previous paragraph. In other words, the behavior should be exactly the same as one would expect from the test cases above, or indeed from any surfing done on the Web.
This paragraph contains an inline element [cl5] with a class of 'cl5' which should float to the right, be seven (7) em wide, and have a yellow background.