清除浮动的方法盒子搭建未清除浮动效果 1.给父盒子设置高度 2.额外标签法(给父元素内容末尾添加一个块级元素,再给标签

盒子搭建

<style>
 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      width: 800px;
      background-color: pink;
      margin: 50px auto 0;
    }

    .box .box1 {
      float: left;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    footer {
      height: 100px;
      background-color: red;
    }
</style>
<body>
  <div class="box clearfix">
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
  </div>
  <footer></footer>
</body>

未清除浮动效果 1.给父盒子设置高度

.box {
      width: 800px;
      height: 800px;
      background-color: pink;
      margin: 50px auto 0;
    }

2.额外标签法(给父元素内容末尾添加一个块级元素,再给标签设置clear:both)

.clearfix::after {
      clear: both;
    }

3.单伪元素清除法

.clearfix::after {
      content: '.';
      display: block;
      clear: both;
      height: 0;
      visibility: hidden;
    }

4.双伪元素清除法

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

5.给父元素设置overflow: hidden

.box {
      overflow: hidden;
      width: 800px;
      background-color: pink;
      margin: 50px auto 0;
    }

清除浮动后效果图