yisainan / web-interview

我是齐丶先丶森,收集整理全网面试题及面试技巧,旨在帮助前端工程师们找到一份好工作!更多详见公众号「前端面试秘籍」
MIT License
2.63k stars 506 forks source link

[兼容性] 49. 子容器浮动后,父容器扩展问题 #911

Open qiilee opened 4 years ago

qiilee commented 4 years ago

问题说明: 子容器都 float 以后,父容器没有设定高度,父容器将不会扩展

解决方法: 只需要添加一个 clear:both 的 div,代码如下:

<div style="border:1px solid#333;width:204px">
    <divstyle="width:100px;border:1px solid #333; float:left; ">子容器a</div>
    <divstyle="width:100px;border:1px solid #333; float:left;">子容器b</div>
    <divstyle="clear:both"></div>
</div>