clear: both; : clear « CSS « HTML / CSS

HTML / CSS » CSS » clear 
clear: both;
  
<!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' xml:lang='en'>
    <head>
        <title>peekaboo</title>
<style type='text/css'>
body {
    font: 16px sans-serif;
}
div#container {
    border: 1px solid rgb(200200200);
    margin: 0 20px;
    background: rgb(234234234);
    padding: 5px;
}
a:hover {
    background: crimson;
    color: white;
}
div#float {
    text-align: center;
    float: left;
    width: 150px;
    height: 150px;
    border: 1px solid rgb(200200200);
    background: rgb(234234234);
}
div.content {
    background: yellow;
    border: 1px solid  rgb(200200200);
}
div#clear {
    border: 1px solid rgb(200200200);
    background: orange;
    clear: both;
}
</style>


    </head>
    <body>
        <div id='container'>
            <div id='float'>
                Float text. <a href='#'>Link text</a>.
            </div>
                Content text. <a href='#'>Link text</a>.
            <div class='content'>
                Content text. <a href='#'>Link text</a>.
            </div>
                Content text. <a href='#'>Link text</a>.
            <div class='content'>
                Content text. <a href='#'>Link text</a>.
            </div>
                Content text. <a href='#'>Link text</a>.
            <div class='content'>
                Content text. <a href='#'>Link text</a>.
            </div>
                Content text. <a href='#'>Link text</a>.
            <div id='clear'>
                Clear text. <a href='#'>Link text</a>.
            </div>
            <div>
                Another div.
            </div>
        </div>
    </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.clear left only
8.Float and Clear Control under CSS
9.Float Clearing
10.Clearing floated content
11.The clear property cancels the effects of the float property, and can prevent wrapping from taking place.
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.