search

博客列表 >浮动元素高度塌陷产生的原因与解决方案 使用定位与浮动完成一个三列经典布局

浮动元素高度塌陷产生的原因与解决方案 使用定位与浮动完成一个三列经典布局

刹那永恒个人博客
刹那永恒个人博客原创
2020年06月23日 12:30:24638浏览

一. 浮动元素高度塌陷产生的原因与解决方案

1.塌陷的产生

  • 当我们给子元素设置了浮动float:left或float:right，但是没有给父元素设置高度时，就会出现父元素高度塌陷问题。 示例如下：
  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>浮动塌陷的产生</title>
  7.     <style>
  8.       .box {
  9.         border: 1px solid #000;
  10.         width: 300px;
  11.       }
  12.       .box1 {
  13.         width: 70px;
  14.         height: 70px;
  15.         background-color: chartreuse;
  16.         border: 1px dashed red;
  17.         margin: 3px;
  18.         float: left;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="box">
  24.       <div class="box1"></div>
  25.       <div class="box1"></div>
  26.       <div class="box1"></div>
  27.     </div>
  28.   </body>
  29. </html>

2.塌陷的解决办法

1.给父元素追加一个高度 （不推荐，因为不能自适应盒子的高度,子元素的大小发生变化还需要从新设置父元素的大小）
2.父元素和子元素都浮动（不推荐，容易产生代码冗余）当代码有多个父级的时候，会有传导效应。需要每一级父元素都去添加浮动。
3.设定空标签进行清除浮动（不推荐，影响渲染结果）
4.通过添加一个伪元素来解决
5.最简单的解决方案，用overflow解决(热力推荐)

  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>浮动塌陷的终极解决办法</title>
  7.     <style>
  8.       .box {
  9.         border: 1px solid #000;
  10.         width: 300px;
  11.           /*靠overflow:hidden*/
  12.         overflow: hidden;
  13.       }
  14.       .box1 {
  15.         width: 70px;
  16.         height: 70px;
  17.         background-color: chartreuse;
  18.         border: 1px dashed red;
  19.         margin: 3px;
  20.         float: left;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="box">
  26.       <div class="box1"></div>
  27.       <div class="box1"></div>
  28.       <div class="box1"></div>
  29.     </div>
  30.   </body>
  31. </html>

二.使用定位与浮动完成一个三列经典布局

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>自己第一次布局</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       /* 设置头部和底部 */
  15.       header,
  16.       footer {
  17.         width: 100%;
  18.         height: 100px;
  19.         margin: 5px auto;
  20.         background-color: greenyellow;
  21.       }
  22.       /* 设置内容区盒子 */
  23.       .box {
  24.         width: 1000px;
  25.         height: 700px
  26.         background-color: ivory;
  27.         overflow: hidden;
  28.         margin: 0 auto;
  29.       }
  30.       /* 设置左侧 */
  31.       .left {
  32.         height: 700px;
  33.         width: 150px;
  34.         background-color: rgb(230, 150, 150);
  35.         float: left;
  36.       }
  37.       /* 设置右侧 */
  38.       .right {
  39.         height: 700px;
  40.         width: 150px;
  41.         background-color: rgb(230, 150, 150);
  42.         float: right;
  43.       }
  44.       /* 设置内容区域 */
  45.       .content {
  46.         width: 680px;
  47.         height: 700px;
  48.         background-color: red;
  49.         float: left;
  50.         margin-left: 10px;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <header></header>
  56.     <div class="box">
  57.       <div class="left"></div>
  58.       <div class="content"></div>
  59.       <div class="right"></div>
  60.     </div>
  61.     <footer></footer>
  62.   </body>
  63. </html>

2.使用定位完成一个三列布局

  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>使用定位完成一个三列布局</title>
  7.     <style>
  8.       //初始化
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       /* 设置header和footer */
  15.       header,
  16.       footer {
  17.         width: 100%;
  18.         height: 120px;
  19.         background-color: lightpink;
  20.       }
  21.       /* 设置box; */
  22.       .box {
  23.         width: 1200px;
  24.         height: 800px;
  25.         background-color: lightyellow;
  26.         margin: 10px auto;
  27.         position: relative;
  28.       }
  29.       .left {
  30.         width: 150px;
  31.         height: 800px;
  32.         background-color: lightgreen;
  33.         position: absolute;
  34.       }
  35.       .content {
  36.         width: 880px;
  37.         height: 800px;
  38.         left: 150px;
  39.         background-color: magenta;
  40.         position: absolute;
  41.         margin: 0 10px;
  42.       }
  43.       .right {
  44.         width: 150px;
  45.         height: 800px;
  46.         background-color: lightgreen;
  47.         position: absolute;
  48.         top: 0;
  49.         right: 0;
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <header></header>
  55.     <div class="box">
  56.       <div class="left"></div>
  57.       <div class="content"></div>
  58.       <div class="right"></div>
  59.     </div>
  60.     <footer></footer>
  61.   </body>
  62. </html>

总结

  • 布局必须要不断的写,要完全掌握
上一条：Chapter4 选择器与表格下一条：11个最新国外python视频课程推荐（含中英文字幕，全网独家）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多