Float Clearing : clear « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. clear

Float Clearing

 
<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title>Float Clearing</title>
  <style type="text/css" media="screen">
    body {
      padding:.5em;
    }
    .container {
      margin-bottom:75px;
      padding:1em;
      background-color:#eee;
      border:3px solid #ddd;
    }
    .floatedbox {
      float:left;
      width:125px;
      height:145px;
      margin-right:1em;
      padding:0 10px;
      background-color:#fff;
      border:3px solid #bbb;
    }
    
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="floatedbox">
      <p>floated box</p>
    </div>
    <h3>Container 1</h3>
    <p>(<em>without</em> easy clearing)</p>
  </div>

  <div class="clearfix container"> 
    <div class="floatedbox">
      <p>floated box</p>
    </div>
    <h3>Container 2</h3>
    <p>This is a test.</p>
  </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.Clearing floated content
10.The clear property cancels the effects of the float property, and can prevent wrapping from taking place.
11.clear: both;