分明浮动四种办法

案例解说

代码

   .container {
      width: 500px;
      background-color: black;
      }
      .left {
      width: 200px;
      height: 300px;
      background-color: red;
      float: left;
      }
      .right {
      width: 200px;
      height: 200px;
      background-color: green;
      float: left;
    }
    .footer {
      width: 600px;
      height: 50px;
      background-color: blue;
    }

<div class="container"> <!-- black -->
    <div class="left">大毛</div> <!-- red -->
    <div class="right">二毛</div> <!-- green -->
  </div>
  <div class="footer">三毛</div> <!-- blue -->

运行后果

能够看见,left、right脱标不占据空间，footer元素与之重叠，footer内容’三毛’被排斥，可见浮动元素不占据空间却占据内容。

一、额定标签法（W3C举荐）

在开端的浮动元素增加一个带有clear:both属性的块级标签。

 .clear{
      clear: both;
    }

<div class="container"> <!-- black -->
    <div class="left">大毛</div> <!-- red -->
    <div class="right">二毛</div> <!-- green -->
    <div class="clear"></div>
  </div>
  <div class="footer">三毛</div> <!-- blue -->

运行后果

二、父级overflow:hidden

给浮动元素的父盒子增加一个overflow:hidden。

.container {
      overflow: hidden;
      width: 500px;
      background-color: black;
      }

运行后果

三、父级after伪元素

给父盒子增加一个指定属性的伪元素,如下

 .clearfix:after {
          visibility: hidden;
          clear: both;
          display: block;
          content: "";
          height: 0
      }
      <!-- IE6、IE7独有 -->
    .clearfix{ 
     *zoom: 1;
    }

<div class="container clearfix">

运行后果

四、父级双伪类元素

给父盒子增加如下属性

 .clearfix:after, .clearfix::before{
          content: "";
          display: table;
      }
      .clearfix:after{
        clear: both;
      }
      .clearfix{
        *zoom: 1;
      }

<div class="container clearfix">

革除浮动实质

察看四种办法运行后果可知,革除浮动实质就是给父盒子增加适应于子盒子的高度,父级盒子有高度了就不会影响前面的规范流盒子。