The clear property cancels the effects of the float property, and can prevent wrapping from taking place. : clear « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. clear

The clear property cancels the effects of the float property, and can prevent wrapping from taking place.

  

<!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>clear</title>
<style type='text/css'>
img#left {
    float: left;
}
img#right {
    float: right;
}
p {
    clear: both;
    margin: 20px 0 0 0;
    font: 12px sans-serif;
    border: 1px solid rgb(200, 200, 200);
    background: rgb(244, 244, 244);
    padding: 5px;
}
</style>


    </head>
    <body>
        <img src='http://java2s.com/style/logo.png' alt='people' id='left' />
        <img src='http://java2s.com/style/logo.png' alt='people' id='right' />
        <p>
            The clear property cancels the effects of the
            float property, and can prevent wrapping from
            taking place.
        </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.clear left only
8.Float and Clear Control under CSS
9.Float Clearing
10.Clearing floated content
11.clear: both;