問題:子容器都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>

如圖所示