收录别人的简书文章到这个专题Web前端之路@IT·互联网

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

2017-05-24  本文已影响100人  你期待的花开

问题:子容器都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>
如图所示
上一篇 下一篇

猜你喜欢

热点阅读