清除浮动

HTML结构：
<div id="outer">
    <div id="inner">
    </div>  
</div>

css结构

#inner{
    float:left;
}

1.设置外层元素overflow:hidden属性

#outer{
    overflow:hidden|auto;
}

2.设置外层元素float:left属性

#outer{
    float:left;
}

3.设置外层元素display属性

#outer{
    display:table;
}

上面父元素display属性还可设为table-cell,table-caption,inline-block,inline-flex,inline-table，外层元素的宽高都会自适应内层元素，而父元素display设为flex，父元素的宽不会自适应。

4.兄弟元素clear：both

<div id="outer">
    <div id="inner"></div>  
    <div style="clear:both"></div>  
</div>

5.兄弟br clear属性为all

<div id="outer">
    <div id="inner"></div>  
    <br clear="all"/>   
</div>

5.外层zoom

#outer{
    zoom:1;
}
#outer::after{
    content:'';
    display:block;
    clear:both;
}