search

博客列表 >浮动元素高度塌陷产生的原因与解决方案、三列经典布局

浮动元素高度塌陷产生的原因与解决方案、三列经典布局

司马青衫
司马青衫原创
2020年06月20日 15:39:36671浏览

浮动元素高度塌陷产生的原因与解决方案 三列经典布局

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

浮动元素高度塌陷产生的原因

  • 父元素在文档流中的高度默认是子元素撑起来的
  • 当子元素浮动后，就会脱离文档流，然后无法撑起父元素
  • 父元素产生高度塌陷 导致页面布局混乱

示例代码

  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.       .container {
  9.         border: 2px dashed red;
  10.       }
  11.       .item {
  12.         width: 100px;
  13.         height: 100px;
  14.         background-color: greenyellow;
  15.       }
  16.       .item {
  17.         float: left;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="container">
  23.       <div class="item"></div>
  24.     </div>
  25.   </body>
  26. </html>

代码效果

说明

  • 从上图可以看出 父元素container的高度没了 边框线成了一条线

解决方案

  1. 给父元素设定一个给定的高度
  2. 给父元素也进行浮动操作
  3. 在该浮动元素后面添加一个同级元素 利用新的同级元素撑起父级
  4. 通过添加伪元素来解决
  5. 给父元素设置overflow: hidden/auto

示例代码

  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.       .container {
  9.         border: 2px dashed red;
  10.       }
  11.       .item {
  12.         width: 100px;
  13.         height: 100px;
  14.         background-color: greenyellow;
  15.       }
  16.       .item {
  17.         float: left;
  18.       }
  19.       /* 1.给父元素设置指定高度 */
  20.       /* .container {
  21.         height: 100px;
  22.       } */
  23.       /* 2.给父元素设置浮动 */
  24.       /* .container {
  25.         float: left;
  26.       } */
  27.       /* 3.添加兄弟元素清浮动 */
  28.       /* .clear {
  29.         clear: both;
  30.       } */
  31.       /* 4.添加伪元素清浮动 */
  32.       /* .container::after {
  33.         content: "";
  34.         display: block;
  35.         clear: both;
  36.       } */
  37.       /* 5.设置父元素的overflow=hidden/auto属性 */
  38.       .container {
  39.         /* overflow: hidden; */
  40.         overflow: auto;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="container">
  46.       <div class="item"></div>
  47.       <!-- <div class="clear"></div> -->
  48.     </div>
  49.   </body>
  50. </html>

代码效果

使用浮动与定位实现三列经典布局

示例代码

  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.         margin: 50px auto;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.         text-align: center;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <div class="container">
  18.       <div class="item1">左边</div>
  19.       <div class="item2">中间</div>
  20.       <div class="item3">右边</div>
  21.     </div>
  22.   </body>
  23. </html>

使用定位完成布局

  1. .container {
  2.   width: 800px;
  3.   min-height: 300px;
  5.   position: relative;
  6. }
  7. .container > .item1 {
  8.   background-color: lightcoral;
  9.   width: 100px;
  10.   height: 300px;
  12.   position: absolute;
  13.   top: 0;
  14.   left: 0;
  15. }
  16. .container > .item3 {
  17.   background-color: lightcoral;
  18.   width: 100px;
  19.   height: 300px;
  21.   position: absolute;
  22.   top: 0;
  23.   right: 0;
  24. }
  25. .container > .item2 {
  26.   background-color: lightgreen;
  27.   width: 600px;
  28.   height: 300px;
  30.   position: absolute;
  31.   top: 0;
  32.   left: 100px;
  33. }

使用浮动完成布局

  1. .container {
  2.   width: 800px;
  3.   min-height: 300px;
  4.   overflow: hidden;
  5. }
  6. .container > .item1 {
  7.   width: 100px;
  8.   height: 300px;
  9.   background-color: lightpink;
  10.   float: left;
  11. }
  12. .container > .item2 {
  13.   width: 600px;
  14.   height: 300px;
  15.   background-color: lightblue;
  16.   float: left;
  17. }
  18. .container > .item3 {
  19.   width: 100px;
  20.   height: 300px;
  21.   background-color: lightpink;
  22.   float: right;
  23. }

代码效果

上一条：浮动元素高度塌陷产生的原因与解决方案、使用定位与浮动完成一个三列经典布局下一条：CSS背景属性、精灵图和字体图标引用流程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多