overflow:hidden;的作用
1.将超出标签范围的内容裁剪掉
2.清除浮动
给第一个盒子设置overflow: hidden;属性
.box1{
background-color: red;
/*margin-bottom: 10px;*/
overflow: hidden;
}
3.让里面的盒子设置margin-top之后外面的盒子不被顶下来
如果两个盒子嵌套,当里面的盒子设置了 margin-top: 20px; 外面的盒子也会被顶下来。
那么如果不想外面的盒子也被顶下来,有两种方法:
第一种方法是给外面的盒子设置一个边框border: 1px solid #000;
第二种方法就是给第一个盒子设置overflow: hidden;
.box1{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid #000;
/*overflow: hidden;*/
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
<div class="box1">
<div class="box2"></div>
</div>