| Sometimes, you may find it necessary to override the float property to prevent elements that appear after a floating element from wrapping. Similar to the clear attribute of the HTML break tag, the CSS clear property allows you to specify whether you want to deny floating around the left, right, or both sides of the element (Table 7.6). Table 7.6. Clear ValuesVALUE | COMPATIBILITY |
|---|
left | IE4, FF1, S1, O3.5, CSS1 | right | IE4, FF1, S1, O3.5, CSS1 | both | IE4, FF1, S1, O3.5, CSS1 | none | IE4, FF1, S1, O3.5, CSS1 |
In this example (Figure 7.11), floating is set for the menu and the drop-box, but the level 2 heading uses clear to force itself below the menu. In addition, a class has been set up called .noFloat that will clear floating from any direction. Figure 7.11. The chapter title has been cleared to the left, so that it now sits underneath the menu (see Figure 7.10). In addition, the paragraph that begins "Have some wine…" is forced underneath the drop-box. 
To stop text from floating: | | 1. | clear:
Type the clear property name, followed by a colon (:), in the CSS rule to start your declaration (Code 7.6).
Code 7.6. The clear property is used to stop the float property assigned to previous elements in the Web page. Here we not only apply it to the <h2> tag, but also set up a special .noFloat class that can be used anywhere.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Clearing Floating</title> <style type="text/css" media="screen"> h1, h2 { color: #999; } h2 { clear: left; } img { margin: 4px; display: block; } #navigation { float: left; margin: 0px 8px 16px 0px; background-color: #ccc; font: small Arial, Helvetica, sans-serif; } #navigation a { padding: 2px 4px; border-top: 3px solid #fff; text-decoration: none; display: block; color: red; } #navigation a:hover { border-top: 3px solid #999; color: red; background-color: #fff; } #copy { width: 700px; height: 300px; overflow: auto; border: 3px solid red; } .author { margin-top: 0cm; font: bold 1em Arial, Helvetica, sans-serif; } .chapterTitle { display: block; font-size: smaller; color:black; } .dropBox { float: right; width: 296px; padding: 6px; border: 1px solid #f66; margin: 0px 0px 8px 8px; font: small Arial, Helvetica, sans-serif; } .noFloat { clear: both; } </style> </head> <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT ⇒ </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER VII <span > A Mad Tea-Party</span> </h2> </div> <p>There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it...</p> <div > <img src="/books/3/292/1/html/2/alice25.gif" height="219" width="288" alt="Alice in Wonderland" /> A mad tea-party indeed! </div> <p>The table was a large one, but the three were all crowded together at one corner of it: 'No room! No room!' they cried out when they saw Alice coming. 'There's <i>plenty</i> of room!' said Alice indignantly, and she sat down in a large arm-chair at one end of the table.</p> <p >'Have some wine,' the March Hare said in an encouraging tone.</p> </body> </html>
|
| 2. | right;
Type the keyword for the side where you want to prevent floating. Choose one of the following:
left to prevent wrapping on the left side of the element right to prevent wrapping on the right side of the element both to prevent wrapping on both sides of the element none to override a previously set clear property
| 3. | <p >. . .</p>
One common usage of clear is to set up a CSS rule called something like nofloat, which can then be applied to any html tag.
|
 Tip
|
