clear left only : clear « Layout « HTML / CSS






clear left only

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type='text/css'>
                body {
                    margin: 0;
                    padding: 8px;
                }
                p {
                    border: 1px solid black;
                    background: rgb(218, 218, 218);
                    line-height: 1em;
                    padding: 10px;
                }
                p#left {
                    width: 200px;
                    float: left;
                    margin: 10px;
                }
                p#right {
                    width: 200px;
                    float: right;
                    margin: 10px;
                }
                p#clear {
                    clear: left;
                }
            </style>
        </head>
        <body>
            <p id='left'>
                This is the text of the first paragraph. 
                This is the text of the first paragraph.
                This is the text of the first paragraph.
                This is the text of the first paragraph.
            </p>
            <p id='right'>
                This is the text of the second paragraph.
                This is the text of the second paragraph.
                This is the text of the second paragraph.
                This is the text of the second paragraph.
                This is the text of the second paragraph.
                This is the text of the second paragraph.
                This is the text of the second paragraph.
                This is the text of the second paragraph.
            </p>
            <p>
                This is the text of the third paragraph.
            </p>
            <p id='clear'>
                This is the text of the forth paragraph.            
            </p>
        </body>
    </html>

 








Related examples in the same category

1.Clear left
2.left clear to start a new line
3.clear right
4.clear: both
5.float: right and clear right
6.Use clear div as the divider
7.clear right and float right
8.The clear property cancels the floating effects, and stop the wrapping.