Prepared by: Anthony Larrain
Float and Clear
When elements, in particular, images are floated (left or right ) elements following the image will line up next to the image. If you want an element to appear underneath the image then you have to clear that element.
Example
Suppose a CSS class selector has been written to float images left.
Suppose we wanted to display two pictures underneath each other separated by a horizontal rule with a short description along side each picture
Here is the code.
Browser Display
I lived in this house from 1962 - 1972. Some people say it was haunted
I lived in this house from 1972 - 1976. Pretty cool !
Both of these houses ......
Note: Since there is not enough text to wrap around the first image, the next element, which is a horizontal rule will line up next to the image. Also the second picture lines up next to the first picture.
Since we want the horizontal rule and subsequent elements to go underneath image we must clear the horizontal rule.
Need to write a class selector to clear the elements
Now to clear the horizontal rule we write.
Browser Display
I lived in this house from 1962 - 1972. Some people say it was haunted
I lived in this house from 1972 - 1976. Pretty cool !
Both of these houses ......