清除浮动的5种方法

为什么要清除浮动 ?

如果父元素没有高度,给父元素里的子元素设置了浮动,因为子元素浮动后会脱标,而子元素又不能把父元素撑开,从而会影响整个网页的布局,所以我们需要主动去清除浮动 !

清除浮动的方法

1. 直接给父元素设置高度
2. 额外标签法
3. 单伪元素清除法
4. 双伪元素清除法
5. 给父元素设置 overflow: hidden

代码演示

一. 直接给父元素设置高度

    .father {
      width: 800px;
      /* 直接给父元素设置高度 */
      height: 200px;
      background-color: pink;
      margin: 50px auto 0;
    }

二. 额外标签法

(在父元素内容的最后添加一个块级标签 在给块级标签设置clear : both)

      .clearfix::after {
          clear: both;
        } 

三. 单伪元素清除法

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

四. 双伪元素清除法

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

五. 给父元素设置 overflow: hidden

    .father {
          overflow: hidden
          width: 800px;
          /* 直接给父元素设置高度 */
          height: 200px;
          background-color: pink;
          margin: 50px auto 0;
    }