• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 12. Box Properties > clear-after Property

12.21. clear-after Property

The clear-after property is a proposed CSS3 addition, and is designed to ensure that the bottom border of a box goes below any floating elements that may appear on a page. This property is intended to prevent elements on a Web page from overlapping when clear and float are used multiple times on a page.

clear-after has a total of nine values: none, left, right, top, bottom, inside, outside, start and end. The none value is the default, and tells the browser to do nothing. For left and top, only elements floating to the left and top are accounted for, and for right and bottom only those elements floating to the right and bottom are considered. If the bottom of an element occurs on a right-hand page, inside only works with left-floating elements, and has the opposite effect on a left-hand page. Similarly, outside works the same way as inside, but with the opposite effect. The start value is dependent on the direction of text in the block it is contained within, and is equivalent to left-top when direction: ltr, and right-bottom when direction: rtl. end works in the same, but opposite way; in other words it is set to right-bottom when direction: ltr, and left-top when direction: rtl. Finally, both considers the left/top and right/bottom floats that may be present.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint