解决内层div设置float左右浮动后，无法被外层div包裹（附外层包裹后内层溢出部分被隐藏解决办法）

淡淡的烟草味﹌ 2023-10-09 11:23 15阅读 0赞

## 内层无法被外层div包裹 ##

内层div的css设置float: left或float: right后，无法被外层div包裹，如图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70][]

解决办法，在外层div的css中添加：**overflow: hidden**，效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 1][]

当然，内层块级元素设置了浮动，都适用这个方法，如图（设置了display: block的a标签）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 2][]

## 内层溢出部分被隐藏 ##

如果外层元素设置了overflow: hidden后内层溢出部分被隐藏，请检查外层元素是否设置了height，外层元素设置了height会导致overflow: hidden将溢出的内层元素隐藏，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 3][] 外层div设置了overflow: hidden;同时设置了height: 300px;

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 4][] 内层溢出部分被隐藏

解决办法，把外层div的height删去，效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 5][] 被隐藏的内层元素显示出来了

注：本文中出现的“简书”字样及网页样式，为学习过程中所模仿，仅用于学习目的，若侵权会积极配合删除。在此感谢简书，网站样式简洁，很适合练习css布局。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190925104648420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190925104929359.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190925105133930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190928165932390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190928165850688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190928170502732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNTM0OA==,size_16,color_FFFFFF,t_70