overflow:hidden可以进行浮动的清除以及配合子元素的margin使其不发生塌陷
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="clear-wrap">
<div class="box1">内容1</div>
</div>
<div class="test">测试一下</div>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
html,body,div{
margin: 0;
padding: 0;
}
.clear-wrap{
width: 100%;
background: red;
overflow: hidden;
}
.clear-wrap div{
float: left;
width: 50%;
box-sizing: border-box;
background: gray;
}
|
平时我们需要经常性的对子元素和父元素之间设置一个边距，
很自然的会想到使用padding,但是padding的一个副作用就是我们需要对父元素的尺寸进行修改，这会增加一定的工作量；
可是margin的效果又需要父元素拥有border才能够起作用，而往往父元素是不需要border的；
这时我们可以使用overflow。
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="wrap">
<div class="mar20"></div>
</div>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
width: 200px;
height: 200px;
background: blue;
overflow: hidden;
}
.mar20{
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
}
|
