1 高度塌陷的存在：原因分析
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8" />
6 <title></title>
7 <style type="text/css">
8
9 .box1{
10 /*为box1设置一个边框*/
11 border: 10px red solid;
12
13 }
14
15 .box2{
16 width: 100px;
17 height: 100px;
18 background-color: blue;
19
20 /*
21 * 在文档流中，父元素的高度默认是被子元素撑开的，
22 * 也就是子元素多高，父元素就多高。
23 * 但是当为子元素设置浮动以后，子元素会完全脱离文档流，
24 * 此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
25 * 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
26 *
27 * 所以在开发中一定要避免出现高度塌陷的问题,
28 * 我们可以将父元素的高度写死，以避免塌陷的问题出现，
29 * 但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
30 */
31
32 /*为子元素设置向左浮动*/
33 float: left;
34 }
35
36 .box3{
37 height: 100px;
38 background-color: yellow;
39 }
40
41 </style>
42 </head>
43 <body>
44
45 <div class="box1">
46 <div class="box2"></div>
47 </div>
48
49 <div class="box3"></div>
50
51 </body>
52 </html>
1 // 高度塌陷的解决方案一
2
3 <!DOCTYPE html>
4 <html>
5 <head>
6 <meta charset="utf-8" />
7 <title></title>
8 <style type="text/css">
9
10 .box1{
11 border: 10px red solid;
12 /*
13 * 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
14 * 简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
15 * 当开启元素的BFC以后，元素将会具有如下的特性：
16 * 1.父元素的垂直外边距不会和子元素重叠
17 * 2.开启BFC的元素不会被浮动元素所覆盖
18 * 3.开启BFC的元素可以包含浮动的子元素
19 *
20 * 如何开启元素的BFC
21 * 1.设置元素浮动
22 * - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
23 * 而且使用这种方式也会导致下边的元素上移，不能解决问题
24 * 2.设置元素绝对定位
25 * 3.设置元素为inline-block
26 * - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
27 * 4.将元素的overflow设置为一个非visible的值
28 *
29 * 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
30 */
31
32 /*overflow: hidden;*/
33
34 /*
35 *但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
36 * 在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，
37 * 该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
38 * 开启方式很多，我们直接使用一种副作用最小的：
39 * 直接将元素的zoom设置为1即可
40 *
41 */
42
43 /*
44 * zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
45 * zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
46 * zoom这个样式，只在IE中支持，其他浏览器都不支持
47 */
48 zoom:1;
49 overflow: hidden;
50
51 }
52
53 .box2{
54 width: 100px;
55 height: 100px;
56 background-color: blue;
57 float: left;
58
59 }
60
61 .box3{
62 height: 100px;
63 background-color: yellow;
64 }
65
66 </style>
67 </head>
68 <body>
69
70 <div class="box1">
71 <div class="box2"></div>
72 </div>
73
74 <div class="box3"></div>
75
76 </body>
77 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7
8 .box1{
9 border: 1px solid red;
10 }
11
12 .box2{
13 width: 100px;
14 height: 100px;
15 background-color: blue;
16
17 float: left;
18 }
19
20 /*
21 * 解决高度塌陷方案二：
22 * 可以直接在高度塌陷的父元素的最后，添加一个空白的div，
23 * 由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
24 * 然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
25 * 基本没有副作用
26 *
27 * 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
28 */
29 .clear{
30 clear: both;
31 }
32
33 </style>
34 </head>
35 <body>
36 <div class="box1">
37 <div class="box2"></div>
38 <div class="clear"></div>
39 </div>
40 </body>
41 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7
8 .box1{
9 border: 1px solid red;
10 }
11
12 .box2{
13 width: 100px;
14 height: 100px;
15 background-color: blue;
16
17 float: left;
18 }
19
20 /*通过after伪类，选中box1的后边*/
21 /*
22 * 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
23 * 这样做和添加一个div的原理一样，可以达到一个相同的效果，
24 * 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
25 */
26 .clearfix:after{
27 /*添加一个内容*/
28 content: "";
29 /*转换为一个块元素*/
30 display: block;
31 /*清除两侧的浮动*/
32 clear: both;
33 }
34
35 /*
36 * 在IE6中不支持after伪类,
37 * 所以在IE6中还需要使用hasLayout来处理
38 */
39 .clearfix{
40 zoom:1;
41 }
42
43
44 </style>
45 </head>
46 <body>
47 <div class="box1">
48 <div class="box2"></div>
49 </div>
50 </body>
51 </html>