清除浮动的四种方法

首先，如果父盒子我们写页面的时候没有给固定高度，它的高度就是子盒子内容的高度。
但是我们如果将子盒子浮动后，那么父盒子就没有高度了。所以，我们清除浮动，是清除浮动带来的影响。并不是清除浮动。

作为一个有节操的程序员，我们平时使用的是第四种更多！
方案四:使用before和after双伪元素清除浮动,给父元素加一个类.clearfix

  .clearfix:after,
  .clearfix:before {
    content: "";
    display: table;
  }

  .clearfix:after {
    clear: both;
  }

  .clearfix {
    *zoom: 1;
  }

本文一共介绍了4种方式清除浮动。效果如下：

代码如下：


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .demo {
    width: 100px;
    border: 1px solid #000;
  }

  .pink {
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
  }

  .skyblue {
    width: 60px;
    height: 60px;
    background-color: skyblue;
    float: left;
  }

  /* 解决方案一 额外标签法*/
  .demo1 {
    width: 100px;
    border: 1px solid #000;
  }

  .pink1 {
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
  }

  .skyblue1 {
    width: 60px;
    height: 60px;
    background-color: skyblue;
    float: left;
  }

  .clear {
    clear: both;
  }

  /* 解决方案二 父元素添加overflow:hidden*/
  .demo2 {
    width: 100px;
    border: 1px solid #000;
    overflow: hidden;
  }

  .pink2 {
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
  }

  .skyblue2 {
    width: 60px;
    height: 60px;
    background-color: skyblue;
    float: left;
  }

  /* 解决方案三 使用after伪元素清除浮动*/
  .demo3 {
    width: 100px;
    border: 1px solid #000;
  }

  .clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .clearfix {
    *zoom: 1;
    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }

  .pink3 {
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
  }

  .skyblue3 {
    width: 60px;
    height: 60px;
    background-color: skyblue;
    float: left;
  }

  /* 解决方案四 使用before和after双伪元素清除浮动*/
  .demo4 {
    width: 100px;
    border: 1px solid #000;
  }

  .clearfix:after,
  .clearfix:before {
    content: "";
    display: table;
  }

  .clearfix:after {
    clear: both;
  }

  .clearfix {
    *zoom: 1;
  }

  .pink4 {
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
  }

  .skyblue4 {
    width: 60px;
    height: 60px;
    background-color: skyblue;
    float: left;
  }
</style>

<body>
  <p>
    首先，如果父盒子我们写页面的时候没有给固定高度，它的高度就是子盒子内容的高度。</p>
  <p>
    但是我们如果将子盒子浮动后，那么父盒子就没有高度了。所以，我们清除浮动，是清除浮动带来的影响。并不是清除浮动。
  </p>
  <div class="demo">
    <div class="pink"></div>
    <div class="skyblue"></div>
  </div>
  <br><br><br>
  <p>方案一:额外标签法</p>
  <div class="demo1">
    <div class="pink1"></div>
    <div class="skyblue1"></div>
    <div class="clear"></div>
  </div>
  <p>方案二:父元素添加overflow:hidden</p>
  <div class="demo2">
    <div class="pink2"></div>
    <div class="skyblue2"></div>
  </div>

  <p>方案三:使用after伪元素清除浮动</p>
  <div class="demo3 clearfix">
    <div class="pink3"></div>
    <div class="skyblue3"></div>
  </div>

  <p>方案四:使用before和after双伪元素清除浮动</p>
  <div class="demo4 clearfix">
    <div class="pink4"></div>
    <div class="skyblue4"></div>
  </div>
</body>

</html>
posted @ 2020-08-26 16:53  小茴香  阅读(227)  评论(0)  编辑  收藏  举报
Live2D