CSS - 浮动与清除浮动

1.浮动

/*左浮动*/
float: left;

/*右浮动*/
float: right;

脱离标准流，浮动的盒子不在保留原先的位置，如何元素都可以加浮动

 

2.清除浮动

兄弟元素关系中，上元素没有设置高度，但是里面有许多盒子。这时下元素就会覆盖上元素里面的盒子，因为上元素没有高度

这时想要解决这个问题就需要清除浮动。解决下元素覆盖上元素的子元素的问题

方式 1 添加额外的标签

    .clear {
        /*参数 both left right*/
        clear: both;
    }  

  <div class="box1">
    <div class="son1"></div>
    <div class="clear"></div>
  </div>

  <div class="box2">
    
  </div>

方式 2 给父类元素添加 overflow: hidden;

    .box1 {
        overflow: hidden;
    }

  <div class="box1">
    <div class="son1"></div>
    <div class="son2"></div>
  </div>

  <div class="box2">

  </div>

方式 3 伪元素清除浮动 给父类添加

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

方式 4 双伪元素清除浮动 给父类添加

.clearfix:before,
.clearfix:after {
  display: table;
  content: ""; 
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}