浮动出现的问题及解决

1、浮动出现的问题？

父元素塌陷
设置了浮动之后，导致父元素高度为0

2、如何解决？

• 给父元素固定高度

  优点 : 比较简单

  缺点：不够灵活

• 给父元素添加overflow属性

  overflow:hidden/scroll/auto;

  优点：比较简单

  缺点：由于overflow:hidden;本身的作用是溢出隐藏，在解决浮动问题的同时，也会隐藏掉内容。

• 在浮动元素的最后边，添加一个空的块标签，给这个块标签设置 clear属性

   <div class="father">
          <div class="son"></div>
          <!-- 方案三、添加一个 “空的块级” 标签 -->
          <div class="a"></div>
      </div>
  ​
     .a{
              /* clear属性作用：解决浮动出现的问题 */
              clear: both;
       }

  优点：属性容易理解

  缺点：结构复杂，会多出很多不需要的块标签

• 准备一个公用的类名 clearfix 用来清除浮动 （最推荐的方案）

  原理：和方案三一样，使用伪元素实现

  .clearfix::after{
             content:'';
             display: block;
             clear: both;
             *zoom: 1; /* 对于ie低版本兼容性不好，*zoom：1解决兼容问题 */
   }
​
​
   <div class="box clearfix">
        里边的四个div是浮动的，直接添加类名clearfix
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>