ソリューションの高さの崩壊

1  <！DOCTYPE HTML > 
2  < HTML > 
3      < ヘッド> 
4          < メタのcharset = "UTF-8" > 
5          < タイトル> </ タイトル> 
6          < スクリプトタイプ= "テキスト/ javascriptの" > 
7              
8          </ スクリプト> 
9          
10      < スタイルタイプ= "テキスト/ cssの" > 
11      .box1 { 
12          幅：100pxに。
13         高さ：100pxに、
14          背景色：AntiqueWhite ; 
15          フロート：左; 
16      } 
17。     .box2 { 
18は         幅：200pxの; 
19。         高さ：200pxの; 
20は、         背景色：ピンク; 
21れる         / * 
22は         、フローティングBOX1の影響に起因BOX2が一体100pxに上方に移動
 23れる         浮動により生じる電流要素の他の要素の影響は、その後、あなたが完了するまでクリアを使用することができたときにクリアされ、
 24          現在の浮動要素上の他の要素の影響を消去するために使用することができる明確な
25          任意の値
 26は         どれもデフォルトはフロートクリアされない
 27          現在の要素のフローティング要素の左側に左クリアを
 28          フローティング要素の右側を排除する権利
 29の         現在の要素のフローティング要素掃気両側
 30を         、フロートクリアランス後他の浮動前に要素が位置に戻り、
 31である         * / 
32         クリア：左、
33は        フロート：右; 
34である     } 
35      .box3 { 
36          幅：300ピクセルによって; 
37          高さ：によって300ピクセル、
38は         背景色：梅; 
39          をクリア：両方; 
40      } 
41      </ スタイル> 
42         
43      </ ヘッド> 
44      < ボディ> 
45       < DIV クラス= "BOX1" > </ DIV > 
46       < DIV クラス= "BOX2" > </ DIV > 
47       < DIV クラス= "BOX3 " > </ divの> 
48      </ ボディ> 
49  <

解决高度塌陷方法：（基本没有副作用）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             
 8         </script>
 9         
10     <style type="text/css">
11     .box1{
12         border: 1px solid red;
13     }
14     .box2{
15         width: 100px;
16         height: 100px;
17         background-color: antiquewhite;
18         float: left;
19     }
20     .box3{
21         /*
22         可以直接在高度塌陷的父元素的最后，添加一个空白的div，
23         由于这个div并没有浮动，所以他是可以撑开父元素的高度的
24         然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度
25         基本没有副作用
26         使用这种方式虽然可以解决问题但是会在页面中添加多余的结构
27         */
28         clear: left;
29     }
30     </style>
31        
32     </head>
33     <body>
34      <div class="box1">
35      <div class="box2"></div>
36      <div class="box3"></div>
37      </div>
38     </body>
39 </html>

3.高度塌陷最推荐的解决方法：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             
 8         </script>
 9         
10     <style type="text/css">
11         /*
12         通过after伪类，选中box1的后边
13         */
14       .box1{
15           border: 1px red solid;
16       }
17     .clearfix:after{
18         /*
19         添加一个伪类，将它转换为一个块元素
20         清除两侧的浮动
21         
22         解决高度塌陷方法：
23         可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
24         这样做和添加一个div的原理一样，是通过CSS来操作不是通过HTML来操作的，
25         可以达到同一个效果，而且不会在页面中添加多余的div,这是最推荐使用的方式，几乎没有副作用。
26         
27         在IE6中不支持after伪类，所以在IE6中还需要hasLayout来处理
28         */
29        content: "";
30        display: block;
31        clear: both;/* 清除影响最大的一方 */
32        .clearfix{
33            zoom: 1;
34        }
35     }
36     .box2{
37         width: 100px;
38         height: 100px;
39         background-color: antiquewhite;
40         float: left;
41     }
42     </style>
43        
44     </head>
45     <body>
46      <div class="box1 clearfix">
47      <div class="box2"></div>
48      </div>
49     </body>
50 </html>

ソリューションの高さの崩壊

おすすめ