面试题:为什么要清除浮动?如何清除浮动?

为什么要清除浮动

1.子元素浮动后不占位置,父元素无法被撑开,影响同级父元素父元素
2.一浮都浮,前面的元素浮动后后面的也要跟随前面的元素一起浮动要不然会脱离标准流影响网页的布局

在一般情况下我们都会给父元素设置高度,但是在某些情况下父元素无法直接去设置高度,需要它被内容所撑开,这种情况如果不给父元素设置高度,但是子元素设置了浮动会怎么样?

<div class="father">
    <div class="son"></div>
  </div>
  <div class="box"></div>
  <div class="box1"></div>

效果如下:

如果说父元素(即粉色盒子)没有设置高度,而红色盒子浮动之后会怎么样

会发现父元素同级的元素都会挤上来,会影响了原来的布局,这种情况就需要清除浮动

如何清除浮动

这里有几种方法都可以清除浮动
方法1 直接给父元素设置高度
方法2 额外标签法(在父元素内容的最后添加一个块级标签 在给块级标签设置clear: both;)

.clear {
      clear: both;
    }

方法3 单伪元素清除法

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

方法4 双伪元素清除法 (单伪元素和双伪元素其实相当于额外标签未能的升级版)

.clearfix:after {
      content: "";/*内容为空*/
      height: 0;/*高度为0*/
      line-height: 0;/*行高为0*/
      display: block;/*转换为块元素*/
      visibility: hidden;/*将元素隐藏*/
      clear: both;/*清除浮动*/
    }

    .clearfix {
      zoom: 1;/*兼容IE*/
    }

方法5 给父元素设置 overflow: hidden;

.father {
      overflow: hidden;
      /* float: left; */
      width: 400px;
      /* height: 150px; */
      background-color: pink;
    }