clear left only : clear « CSS « 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' Example
2.	clear: left with float: left
3.	clear: left with float right
4.	clear: both
5.	clear both
6.	clear left
7.	Float and Clear Control under CSS
8.	Float Clearing
9.	Clearing floated content
10.	The clear property cancels the effects of the float property, and can prevent wrapping from taking place.
11.	clear: both;