HTML5之高度塌陷问题的解决-662P.COM

本文主要介绍了HTML5之高度塌陷问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

所谓的高度塌陷，意即当给子元素设置浮动时，其父元素高度会丢失的情况。通过实际代码进行演示：

<!DOCTYPE html><html lang="en">  
<head>    <meta charset="UTF-8">    
<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>    
<style>        
main {            
width: 100%;           
 background-color: #ccc;        
 }                 
 .one {            
 float: left;            
 width: 200px;            
 height: 200px;            
 background-color: skyblue;       
  }                 
  .two {            
  float: right;            
  width: 200px;            
  height: 200px;            
  background-color: tomato;        
  }                 
  section {            
  width: 400px;            
  height: 400px;            
  background-color: orange;        
  }    
  </style></head>  <body>    
  <main>        
  <div class="one"></div>        
  <div class="two"></div>    
  </main>    
  <section></section></body>  
  </html>

初始时的效果，高度出现塌陷，下部的橘色模块会上移。现给出五种解决方案：