overflow:hidden怎么使用

Question

如题！！！

常常碰到子级大于父级的情况，这时想隐藏就要用overflow:hidden

但是具体要注意哪些呢？

什么时候能用什么时候不能用？

Answer 1

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