CSS浮动布局带来的高度塌陷以及其解决办法

  1 <!DOCTYPE html>     
  2 <html lang="en">    
  3 <head>   
  4     <meta charset="UTF-8">
  5     <title></title> 
  6     <style>         
  7     .outer{         
  8         border:10px red solid;           
  9     }    
 10     .inner{         
 11         width:100px;
 12         height:100px;    
 13         background-color:orange;
 14         float:left;
 15         /*
 16         高度塌陷的问题：
 17             在浮动布局当中，父元素的高度默认被子元素撑开
 18                 档子元素浮动后，其会脱离文档流，子元素会从文档流中>    脱离将会无法撑起父元素的高度，导致父元素的高度丢失
 19             父元素高度丢失后，其下面的元素会自动上移，导致页面布局>    混乱
 20             所以高度塌陷的问题是浮动布局中比较常见的问题，这个问题>    我们必须进行处理
 21          
 22          */
 23     }    
 24     /*   
 25     BFC-块级格式化环境
 26         -BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
 27             开启BFC该元素会变成一个独立的布局区域
 28         -元素开启BFC后的特点：
 29             1.开启BFC的元素不会被浮动元素锁覆盖
 30             2.开启BFC的元素子元素和父元素外边距不会重叠
 31             3.开启BFC的元素可以包含浮动的子元素
 32         可以通过一些特殊的方法来开启元素的BFC
 33             1.设置元素浮动
 34             2.将元素设置为行内块元素
 35             3.将overflow设置为非visible的值
 36                 -hiden/auto
 37      */  
 38     </style>
 39 </head>  
 40 <body>   
 41     <div class="outer">
 42         <div class="inner"></div>
 43                                                                    
 44     </div>
 45 </body>  
 46 </html>  
~                                                                      
~                                                                      
~                                                                      
~                                                                      
~                                                                      
~                                                                      
~
笨鸟先飞