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

结论:如果这个父元素是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>

页面效果:
这里写图片描述

<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>

页面效果:
这里写图片描述

猜你喜欢

转载自blog.csdn.net/csm0912/article/details/82661136