分明浮动四种办法

案例解说

代码

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

革除浮动实质

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