overflow:hidden怎么使用

Question

如题！！！常常碰到子级大于父级的情况，这时想隐藏就要用overflow:hidden但是具体要注意哪些呢？什么时候能用什么时候不能用？

Answer 1

1. overflow:hidden; 代表隐藏滚动条，包括横向滚动条与竖向滚动条。当给父容器设置了特定高度的情况下，子容器超出父容器高度，会进行隐藏。想要出现滚动条可以设置：overflow:auto;或者单独设置，overflow-x:auto;overflow-y:auto;

2. overflow:hidden; 还可以创建上下文块级作用域，可以清除浮动。例如：

div.wrapper {
    border: 1pxsolid#ccc;
    width: 200px;
    padding: 10px;
    overflow : hidden; // 创建块级格式化上下文，包含浮动元素
    // display : inline-block;   // 这里也可以设置这个属性，达到同样效果
}
 
div.box {
    width: 50px;
    height: 50px;
    border: 1pxsolid#ccc;
}
 
div.box1 {
    float : left;
}
 
div.box2 {
    float:right;
}

<divclass="wrapper">
    <divclass="box box1"></div>
    <divclass="box box2"></div>
</div>