子容器浮动后，父容器的扩展问题

问题：子容器都float以后，父容器没有设定高度,父容器将不会被撑开。

<div style="border:5px solid red;width:210px">
    <div style="width:200px;border:5px solid black; float:left; ">子容器</div>
</div>

如图所示

解决方法

1：添加一个clear:both的div

<div style="border:5px solid red;width:210px">
    <div style="width:200px;border:5px solid black; float:left; ">子容器</div>
    <div style="clear:both"></div>
</div>

2：父级div定义伪类：after

.clearfix:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
.clearfix{
            display: inline-block;
        }

3.父级div定义overflow：hidden

<div style="border:5px solid red;width:210px;overflow: hidden" >
    <div style="width:200px;border:5px solid black; float:left; ">子容器</div>
</div>

4.父级div定义overflow：auto

<div style="border:5px solid red;width:210px;overflow: auto" >
    <div style="width:200px;border:5px solid black; float:left; ">子容器</div>
</div>

5.父级div也浮动，需要定义宽度

<div style="border:5px solid red;width:210px;float:left" >
    <div style="width:200px;border:5px solid black; float:left; ">子容器</div>
</div>

6.父级div定义display:table

<div style="border:5px solid red;width:210px;display: table" >
    <div style="width:200px;border:5px solid black; float:left; ">子容器</div>
</div>

如图所示