清除浮动的五种方法

当在一个父元素（大盒子）里添加一个带有浮动效果的子元素（小盒子）时，父元素就会塌陷，这时我们就需要清除浮动。

效果：

• 子元素未添加浮动

• 子元素添加浮动后的效果

CSS区域：

.bigbox{

            width: 400px;

            border: 1px solid #000;

        }

        .small{

            /* float: left; */

            width: 100px;

            height: 100px;

            background-color: #f0f;

        }

HTML区域：

<div class="bigbox">

        <div class="small"></div>

    </div>

 解决方法：

  1.浮动引起的父元素盒子的高度塌陷，给父元素添加隐藏浮动 */

            overflow: hidden; 

代码：

.bigbox{

            overflow: hidden; 

            width: 400px;

            border: 1px solid #000;

        }

2.给父元素添加浮动   父元素的宽会包裹盒子

             float: left; 

代码：

.bigbox{

             float: left; 

            width: 400px;

            border: 1px solid #000;

        }

3.在父元素后面添加一个空div,再添加clear:both; 为了考虑兼容的问题可以添加 height: 0; overflow: hidden;

代码：

HTML区域：

<div class="bigbox">

        <div class="small"></div>

//添加一个空div,再添加clear:both; 为了考虑兼容的                                                                       问题可以添加 height: 0; overflow: hidden;

        <div style="clear: both;"></div>

</div>

4.在父元素中添加:after伪类选择器,样式 {content:" ";display:block;clear:both;} 

代码：

CSS区域：

.bigbox{

            width: 400px;

            border: 1px solid #000;

        }

 .bigbox::after{

            content: " ";

            display: block;

            clear: both;

        }

这种方法最常用。

5.直接给父元素添加高度 

.bigbox{

            width: 400px;

            height:300px;

            border: 1px solid #000;

        }