所谓的高度塌陷,意即当给子元素设置浮动时,其父元素高度会丢失的情况。通过实际代码进行演示:
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
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title > < style > main { width: 100%; background-color: #ccc; } .one { float: left; width: 200px; height: 200px; background-color: skyblue; } .two { float: right; width: 200px; height: 200px; background-color: tomato; } section { width: 400px; height: 400px; background-color: orange; } </ style > </ head > < body > < main > < div class = "one" ></ div > < div class = "two" ></ div > </ main > < section ></ section > </ body > </ html > |
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容