效果示例图
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动元素造成的高度坍塌</title>
<style type="text/css">
.container-noclear {
border: 1px solid red;
width: 500px;
margin: 50px auto;
}
.container {
border: 1px solid red;
width: 500px;
margin: 50px auto;
}
.container::after {
content: "";
clear: both;
display: block;
}
.items {
border: 1px solid #00a2ef;
width: 100px;
height: 100px;
margin: 11px 11px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
</div>
<div class="container-noclear">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
伪元素
