众所周知，平时在写HTML代码时，难免少不了使用Float样式，这样一来，假使您没有清除浮动，那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说，假如你在写CODE时，其中div.A（这个就是说页面中有一个div，并且把其命名为class="A"）中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例)，并且此时div.B和div.C进行浮动，而div.D不进行任何浮动，此时你可以看到父元素div.A高度仅靠div.D来撑开其高度，如果您将div.A所有子元素进行浮动，当你没有清除内部浮动时，此时会导致浮动的父元素div.A无法自动撑开本身的高度。也就是说：当一个元素是浮动的，如果没有关闭浮动时，其父元素不会包含这个浮动元素，因为此时浮动元素从文档流中脱离。下面我们先来看看这两种现像的实例：

HTML Code:

  <div class="demo A">
    <div class="demoB demoFloat">float left</div>
    <div class="demoC demoFloat">float right</div>
    <div class="demoD demoFloat">not float</div>
  </div>

给上面的加上一些基本的样式：

 
  .demo {
     width: 300px;
     border: 1px solid red;
  }
 .demoFloat {
     background: green;
     margin: 0;
 }
 .demoC {
    background: orange;
 }
 .demoD {
    background: lime;
    border: 2px solid blue;
 }

下面先来看第一种，div.B和div.C进行浮动，而div.D不进行浮动

 .demoB {
   float: left;
 }
 .demoC {
   float: right;
 }

效果：