分明浮动四种办法

案例解说

代码

   .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">

革除浮动实质

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