简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >div布局及浮动元素高度塌陷的解决措施

div布局及浮动元素高度塌陷的解决措施

xsrsblog
xsrsblog原创
2020年06月20日 13:03:38975浏览

浮动元素高度塌陷

子元素设置了float样式之后，脱离了正常的文档流，父元素的高度没有被相应撑开，导致了父元素的高度塌陷。

有若干方法可以消除子元素浮动造成的父元素高度塌陷：
如图示例：

  1. 设置父元素的高度

  1. 父元素也浮动

  1. 插入清除浮动元素

  1. 插入伪元素

  1. 父元素设置溢出隐藏样式

三列经典布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         /* 清除样式 */
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             list-style: none;
  13.             text-decoration: none;
  14.         }
  15.         /* 设置链接 */
  16.         a{
  17.             color: grey;
  18.             font-size: 20px;
  19.             height: 30px;
  20.             line-height: 30px;
  22.         }
  24. /* 头部设置，清除Li的浮动影响 */
  25.         .head{
  26.             background-color: lightskyblue;
  27.             /* border: 1px solid red; */
  28.             overflow: hidden;
  29.         }
  30.        /* li设置浮动 */
  31.         li{
  32.             float: left;
  33.             padding: 10px 40px;
  34.             /* border: 1px solid blue; */
  36.         }
  38.         .foot{
  39.             background-color: lightskyblue;
  41.         }
  43.         /* 底部设置 */
  44.         .foot span{
  45.             text-align: center;
  46.             display: block;
  47.             margin: 0 auto;
  48.             height: 50px;
  49.             font-size: 20px;
  50.             line-height: 50px;
  51.             color: lightslategrey;
  52.         }
  54. /* min-height一定要设置高度，否则会因为子div定位或浮动造成高度塌陷 */
  55.         .body1{
  56.             width: 980px;
  57.             min-height: 620px;
  58.             background-color: wheat; 
  59.             margin: 0 auto;
  61.             position: relative;
  63.         }        
  64.         .left{
  65.             width: 200px;
  66.             min-height: 600px;
  67.             /* float: left; */
  68.             background-color: magenta;
  69.             position: absolute;
  70.             top: 10px;
  71.             left: 0;
  72.         }
  73.         /* 居中设置 */
  74.         .middle{
  75.             width: 560px;
  76.             min-height: 600px;
  77.             background-color: lightseagreen;
  78.             /* float: left; */
  79.             position: absolute;
  80.             top: 10px;
  81.             left: 210px;
  82.         }
  83.         .right{
  84.             width: 200px;
  85.             min-height: 600px;
  86.             /* float: left; */
  87.             background-color: mediumslateblue;
  88.             position: absolute;
  89.             top: 10px;
  90.             right: 0;
  91.         }
  93.     </style>
  94. </head>
  95. <body>
  96.     <div class="head">  
  97.         <ul>
  98.             <li><a href="">首页</a></li>
  99.             <li><a href="">618会场</a></li>
  100.             <li><a href="">在线客服</a></li>
  101.         </ul>
  102.     </div>
  104.     <div class="body1">
  105.         <div class="left">left</div>
  106.         <div class="middle">middle</div>
  107.         <div class="right">right</div>
  108.     </div>
  110.     <div class="foot">
  111.         <span>xxxxxx有限公司© | 备案号: 皖ICP *********</span>
  112.     </div>
  113. </body>
  114. </html>

效果：

上一条：盒模型所有常用属性、box-sizing的用法、理解定位元素的水平与垂直对齐技术 垂直居中下一条：css背景设置和阿里图标的引用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多