清除浮动的6中方法总结 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动</title>
  <style>
  /*
  1.直接给父元素添加高度
    扩展性不好

  2.父元素添加overflow: hidden;
    ie6 7 底下不支持BFC

  3.父元素添加浮动，float: left
    ie6 7 底下不支持BFC

  4.通过添加br标签 <br clear='all' />
    ie6 不支持
    违反了结构 行为 样式 相分离的原则

  5.通过空标签clear: both 清楚浮动<div style='clear: both;'></div>
    违反了结构 行为 样式 相分离的原则
      ie6 下元素的最小高度为19px（设置高度1-19px 都是19px）
      可以尝试给元素的fontsize设置0到2px

  6.伪元素清除浮动
    父元素中添加样式和伪元素样式
      *zoom: 1;
      :after{
        content: '';
        display: block;
        clear: both;
      }

  如果要考虑ie6 ie7 最好的方法是伪元素 + 开启haslayout
  不考虑的话伪元素就是最好的方法
    因为ie6 7 不支持伪元素，所以要额外的去开启 haslayout

  */
  * {
    margin: 0;
    padding: 0;
  }

  #wrap {
    border: 2px solid #ddd;
    /*1.直接给父元素添加高度，有点low*/
    /*height: 300px;*/

    /*2.父元素添加overflow: hidden;*/
    /*overflow: hidden;*/

    /*3.通过开启BFC，父元素添加float: left*/
    /*float: left;*/
  }

  #inner {
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;
  }

  /*6.伪元素清除浮动*/
  .clearFloat {
    *zoom: 1;
  }

  .clearFloat:after {
    content: '';
    display: block;
    clear: both;
  }
  </style>
</head>
<body>
<div id='wrap' class='clearFloat'>
  <div id='inner'>
  </div>
  <!--4.通过添加br标签 <br clear='all' />-->
  <!--<br clear='all'>-->

  <!--5.通过clear: both 清楚浮动-->
  <!--<div style='clear: both;'></div>-->
</div>
</body>
</html>

 

posted @ 2020-09-17 17:15  张_Ning  阅读(128)  评论(0)    收藏  举报