清除浮动

father {
width: 400px;
border: 1px solid red;
}

.box1 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}

.box2 {
width: 100px;
height: 100px;
background-color: deepskyblue;
}

.foot {
width: 500px;
height: 200px;
background-color: cadetblue;
}

当给子元素设置float：left时

1.此时父元素的高度没有了，可以在父元素中添加内容（再添加一个div，给这个div设置clear：both）

<div class="father cle">

        <div class="box1">first</div>

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

        <div class="box3">third</div>

    </div>

    <div class="foot"></div>

.father {

            width: 400px;

            border: 1px solid red;

        }

        

        .box1 {

            width: 100px;

            height: 100px;

            background-color: cornflowerblue;

            float: left;

        }

        

        .box2 {

            width: 100px;

            height: 100px;

            background-color: deepskyblue;

            float: left;

        }

        

        .foot {

            width: 500px;

            height: 200px;

            background-color: cadetblue;

        }

        

        .box3 {

            clear: both;

        }

 

 2.再父元素中设置overflow：hidden

 

 3.设置after伪类

<div class="father cle">

        <div class="box1">first</div>

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

        

    </div>

    <div class="foot"></div>

 

 .cle:after {

            content: "";

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

        }

        

        .cle {

            *zoom: 1;

        }

 

 

 

 

4.使用after和before双伪类

 .cle:after,

        .cle:before {

            content: "";

            display: table

        }

        

        .cle:after {

            clear: both;

        }

        

        .cle {

            *zoom: 1;

        }

<div class="father cle">

        <div class="box1">first</div>

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

        

    </div>

    <div class="foot"></div>