欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页

父元素overflow:hidden对子元素的影响

程序员文章站 2024-03-24 23:01:34

...

结论：如果这个父元素是body，则子元素不受影响；如果这个父元素是body之外的其他元素，则子元素会受overflow:hidden;的影响，即，子元素超出父元素部分会被隐藏。

如：

<style>
    body {
        width: 50px;
        height: 50px;
        overflow: hidden;
        border: 1px solid blue;
    }
    .son {
        width: 150px;
        height: 50px;
        background: yellow;
    }
</style>
<body>
    <div class="son"></div>
</body>

页面效果：
父元素overflow:hidden对子元素的影响

<style>
    .father {
        width: 50px;
        height: 50px;
        overflow: hidden;
        border: 1px solid blue;
    }
    .son {
        width: 150px;
        height: 50px;
        background: yellow;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

页面效果：
父元素overflow:hidden对子元素的影响

相关标签： overflow:hidden

上一篇： Android蓝牙BLE开发（二）——对BLE设备的扫描连接以及读写数据

下一篇：面试题总结

推荐阅读