CSS清除浮动

浮动溢出

当容器未设置高度，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

1、使用clear属性清除浮动影响

clear:both 相当于专门设置了一个空盒子来撑起父元素的高度

 
      .father {
            background-color: pink;
            border: solid 1px black;
            width: 200px;
        }
 
     .son1{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: blue;
        float: left;
     }
     .son2{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: yellow;
        float: left;
     }
     .son3{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: green;
        float: left;
     }
 
     .clear {
      clear:both;
    }
 
    <div class="father">
            <div class="son1">div>
            <div class="son2">div>
            <div class="son3">div>
            <div class="clear">div>
    div>

2、使用CSS的overflow属性

给有浮动元素的container添加overflow:hidden或者overflow:auto;可以清除浮动

.father {
            background-color: pink;
            border: solid 1px black;
            width: 200px;
            overflow: auto;
        }
 
     .son1{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: blue;
        float: left;
     }
     .son2{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: yellow;
        float: left;
     }
     .son3{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: green;
        float: left;
     }
 
 <div class="father">
            <div class="son1">div>
            <div class="son2">div>
            <div class="son3">div>
div>

3、使用CSS的::after伪元素

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动，通过清除伪元素的浮动，达到撑起父元素高度的目的。该伪元素的display值为block（也可以使用table，因为table也是一个块级元素）。

.father {
            background-color: pink;
            border: solid 1px black;
            width: 200px;
        }
 
     .son1{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: blue;
        float: left;
     }
     .son2{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: yellow;
        float: left;
     }
     .son3{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: green;
        float: left;
     }
 
    .clearfix::after{
     clear: both;
     display: block;
     content: "";
    }
 
   .clearfix {
     *zoom: 1; 
    }
 
<div class="father clearfix">
            <div class="son1">div>
            <div class="son2">div>
            <div class="son3">div>
div>

4、使用 ::before 和 ::after 双伪元素清除浮动

clearfix::before,clearfix::after

 .father {
            background-color: pink;
            border: solid 1px black;
            width: 200px;
        }
 
     .son1{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: blue;
        float: left;
     }
     .son2{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: yellow;
        float: left;
     }
     .son3{
        width: 50px;
        height: 50px;
        border: solid 1px black;
        background-color: green;
        float: left;
     }
 
    .clearfix{
       *zoom: 1;
    }
 
    .clearfix::before,.clearfix::after{
       content: '';
       display: block;
       clear: both;
    } 
 
<div class="father clearfix">
            <div class="son1">div>
            <div class="son2">div>
            <div class="son3">div>
div>