CSS高度陥没問題解決方案
32274 ワード
：
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>title>
6 <style type="text/css">
7
8 .box1{
9 /* box1 */
10 border: 10px red solid;
11
12 }
13
14 .box2{
15 width: 100px;
16 height: 100px;
17 background-color: blue;
18
19 /*
20 * ， ，
21 * ， 。
22 * ， ，
23 * ， 。
24 * ， ， 。
25 *
26 * ,
27 * ， ，
28 * ， ， 。
29 */
30
31 /* */
32 float: left;
33 }
34
35 .box3{
36 height: 100px;
37 background-color: yellow;
38 }
39
40 style>
41 head>
42 <body>
43
44 <div class="box1">
45 <div class="box2">div>
46 div>
47
48 <div class="box3">div>
49
50 body>
51 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>転載先:https://www.cnblogs.com/fuck1/p/7441327.html