overflow:hidden与浮动的关系 

  1 @{
  2     ViewBag.Title = "Index";
  3 }
  4 
  5 
  6 
  7 
  8 
  9 <style type="text/css">
 10     #wai, #wai_1, #wai_2 {
 11     }
 12 
 13     #wai {
 14         width: 500px;
 15         background: white;
 16         height: auto;
 17         border: 2px solid blue;
 18     }
 19 
 20     #nei {
 21         width: 300px;
 22         height: 300px;
 23         background: red;
 24     }
 25 
 26 
 27 
 28 
 29     #wai_1 {
 30         margin-top: 20px;
 31         width: 500px;
 32         background: white;
 33         height: auto;
 34         border: 2px solid blue;
 35     }
 36 
 37     #nei_1 {
 38         width: 300px;
 39         height: 300px;
 40         background: red;
 41         float: left;
 42     }
 43 
 44 
 45     #wai_2 {
 46         overflow: hidden;
 47         margin-top: 313px;
 48         width: 500px;
 49         background: white;
 50         height: auto;
 51         border: 2px solid blue;
 52     }
 53 
 54     #nei_2 {
 55         width: 300px;
 56         height: 300px;
 57         background: red;
 58         float: left;
 59     }
 60 </style>
 61 
 62 <html>
 63 <body>
 64     <div id="wai">
 65         <div id="nei">
 66             #wai {
 67         width: 500px;
 68         background: green;
 69         height: auto;
 70           border:2px solid blue
 71        
 72     }
 73             <br />
 74             #nei {
 75         width: 300px;
 76         height: 300px;
 77         background: red;
 78         opacity: 0.5;
 79        
 80     }
 81             <br />
 82             外DIV高度随着内DIV的高度自动适应（其中内DIV没有设置浮动元素：float）
 83         </div>
 84     </div>
 85 
 86 
 87 
 88     <div id="wai_1">
 89         <div id="nei_1">
 90             #wai_1 {
 91          margin-top:20px;
 92         width: 500px;
 93         background: white;
 94         height: auto;
 95         border:2px solid blue
 96 
 97        
 98     }
 99             <br />
100             #nei_1 {
101         width: 300px;
102         height: 300px;
103         background: red;
104         opacity: 0.5;
105         float:left;
106        
107     }
108             <br />
109             外DIV高度没有内DIV的高度自动适应（其中内DIV有设置浮动元素：float）
110         </div>
111     </div>
112 
113 
114     <div id="wai_2">
115         <div id="nei_2">
116             #wai_2 {
117          margin-top:313px;
118         width: 500px;
119         background: white;
120         height: auto;
121         border:2px solid blue;
122         overflow:hidden
123 
124        
125     }
126             <br />
127             #nei_2 {
128         width: 300px;
129         height: 300px;
130         background: red;
131         opacity: 0.5;
132         float:left;
133        
134     }
135              <br />
136             外DIV高度随着内DIV的高度自动适应（其中内DIV有设置浮动元素：float，但同时外div有设置  overflow:hidden）
137         </div>
138     </div>
139     区别：<br />
140     第一个案例子DIV没有设置浮动元素float，<br />
141     第二个案例子DIV设置了浮动元素： float:left;<br />
142     现象：<br />
143     第一个案例的子DIV高度能与父DIV（没有设置浮动元素）高度适应，<br />
144     第二个案例的子DIV高度能与父DIV（有设置浮动元素float:left;）高度不能适应，<br />
145     子DIV设置了浮动元素float没有撑开的原因：当子DIV加上浮动float这个属性的时候，子DIV已经脱离了父div（相对独立），也就是说父DIV的宽高是多少，对于已经脱离了父DIV的子DIV来说，子DIV的的变化不影响父DIV。（关键子：内外已经脱离）<br />
146     第三个案例：子DIV（有设置浮动元素float:left;）为什么父DIV能够自适应呢？（关键：父DIV: overflow:hidden）<br />
147     虽然当子DIV加上浮动float这个属性的时候，此时子DIV已经脱离了父div（相对独立），也就是说父DIV的宽高是多少，对于已经脱离了的子DIV来说，子DIV的的变化不影响父DIV。但我们在父DIV:设置了 overflow:hidden，重新让父的宽高与子DIV关联在一起，达到自适应的效果  
148 </body>
149 </html>

 

posted on 2015-08-12 15:48  高达  阅读(348)  评论(0)    收藏  举报

导航