如何清除浮动

1.为什么要清除浮动

当元素设置float浮动后，该元素会脱离文档并向左向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷，所以设置完浮动之后需要进行清除浮动。

示例：

html页面结构：

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

css样式:

.father {}
.son1 {
    height: 200px;
    width: 200px;
    background-color: red;
       }
.son2 {
    height: 400px;
    width: 300px;
    background-color: pink;
}

页面效果

父元素的高度由子元素撑开。

但是给两个子元素添加浮动之后，脱离标准流，则会造成父元素高度塌陷

.son1 {
    height: 200px;
    width: 200px;
    background-color: red;
    float: left;
}
.son2 {
    float: left;
    height: 400px;
    width: 300px;
    background-color: pink;
}

效果：

为了解决父元素高度塌陷，可以用以下方法

2.清除浮动方法

• 父子级（嵌套关系）

1.父元素定死高度 （定死高度，影响布局。不推荐）

.father {
      height: 400px;
}

2.给父元素后面添加一个空白div，并且清除浮动（不推荐，因为会让页面结构冗余）

​ 2.1直接加
页面结构

<div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <!-- 空白div 2.1-->
        <div class="clear"></div>
</div>

css

.clear {
   clear: both;
} 

​ 2.2 利用::after伪元素选择器添加

 .father::after {
        content: '';
        display: block;
        clear: both;
} 

3.给父元素添加overflow:hidden;(推荐使用)

由于在IE比较低版本的浏览器中使用overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1;

.father {
       /* 会产生一个bfc*/
       overflow: hidden;
 }

• 兄弟级

  给当前元素（被浮动影响的元素）设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响。

页面结构

<div class="div1"></div>
<div class="div2"></div>

css样式

.div1 {
height: 300px;
width: 300px;
background-color: red;
}
.div2 {
height: 300px;
width: 300px;
background-color: blue;
}

此时的效果就是按照块级元素的特性上下排布，若给div1添加了一个左浮动

页面则显示如下

div1左浮动脱离标准流，不占据标准流的空间，div2则会向上排布。若想上下排布，则需要受影响的元素清除浮动

 .div2 {
 height: 300px;
 width: 300px;
 background-color: blue;
 clear: both;
 }