search

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

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

忠于原味
忠于原味原创
2020年06月20日 15:56:04872浏览

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

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

我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）
如图：

2.浮动元素高度塌陷解决方案

  • 解决方案 1：给父级也添加一个高度; 缺点：父级无法做到自适应
  • 解决方案 2：把父级也浮动起来; 缺点：如果当前浮动元素有多个父级需要把每个父级都添加浮动，造成传导效应.
  • 添加一个专用元素用于清浮动; 缺点：添加了多余的 dom 元素会影响到渲染的结果
  • 解决方案 4：添加一个伪元素;
  • 解决方案 5： 最简单的解决方案，用到了 BFC（块级格式化上下文）

综上的 5 种解决方案，常用 3，4，5 ，最优取第 5 种方案具体原因你试试就知道有多给力了下面附上参考代码:

  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: 3px dashed red;
  10.       }
  11.       .item {
  12.         width: 150px;
  13.         height: 150px;
  14.       }
  15.       .item:first-of-type {
  16.         background: lightgreen;
  17.       }
  18.       .item:nth-of-type(2) {
  19.         background-color: lightcoral;
  20.       }
  21.       .item:nth-of-type(3) {
  22.         background-color: lightblue;
  23.       }
  24.       /* 将三个子元素全部浮动 */
  25.       .item {
  26.         float: left;
  27.       }
  28.       /* 解决方案1：给父级也添加一个高度 缺点：父级无法做到自适应 */
  29.       /* .container {
  30.         height: 150px;
  31.       } */
  32.       /* 解决方案2：把父级也浮动起来 缺点：如果当前浮动元素有多个父级需要把每个父级都添加浮动，造成传导效应*/
  33.       /* .container {
  34.         float: left;
  35.       } */
  36.       /* 解决方案3：添加一个专用元素用于清浮动 缺点：添加了多余的dom元素会影响到渲染的结果*/
  37.       /* .clear {
  38.         clear: both;
  39.       } */
  40.       /* 解决方案4：添加一个伪元素 */
  41.       /* .container::after {
  42.         content: "";
  43.         display: block;
  44.         clear: both;
  45.       } */
  46.       /* 解决方案5： 最简单的解决方案，用到了BFC（块级格式化上下文） */
  47.       .container {
  48.         overflow: hidden;
  49.       }
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <div class="container">
  54.       <div class="item">1</div>
  55.       <div class="item">2</div>
  56.       <div class="item">3</div>
  57.       <!-- <div class="clear"></div> -->
  58.     </div>
  59.   </body>
  60. </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.       li {
  15.         list-style: none;
  16.       }
  17.       a {
  18.         text-decoration: none;
  19.         color: #666;
  20.       }
  21.       /* 页眉和页脚 */
  22.       .header,
  23.       .footer {
  24.         height: 40px;
  25.         background-color: lightblue;
  26.       }
  27.       /* 页脚页眉的内容区 */
  28.       .content {
  29.         width: 960px;
  30.         margin: auto;
  31.       }
  32.       .content ul li {
  33.         float: left;
  34.         line-height: 40px;
  35.         padding: 0 15px;
  36.       }
  37.       .content ul li:hover {
  38.         background-color: coral;
  39.       }
  40.       /* 页脚样式 */
  41.       .content p {
  42.         text-align: center;
  43.         line-height: 40px;
  44.       }
  45.       /* 主体定位 */
  46.       .container {
  47.         width: 960px;
  48.         margin: 10px auto;
  49.         min-height: 600px;
  50.         /* 防止浮动元素的高度塌陷 */
  51.         overflow: hidden;
  52.       }
  53.       .container > .left {
  54.         width: 200px;
  55.         background-color: wheat;
  56.         min-height: 600px;
  57.         float: left;
  58.       }
  59.       .container > .right {
  60.         width: 200px;
  61.         background-color: wheat;
  62.         min-height: 600px;
  63.         float: right;
  64.       }
  66.       .container > .main {
  67.         background-color: lawngreen;
  68.         min-height: 600px;
  69.         width: 540px;
  70.         float: left;
  71.         margin-left: 10px;
  72.       }
  73.     </style>
  74.   </head>
  75.   <body>
  76.     <!-- 页眉 -->
  77.     <div class="header">
  78.       <div class="content">
  79.         <ul>
  80.           <li><a href="">首页</a></li>
  81.           <li><a href="">618主会场</a></li>
  82.           <li><a href="">在线客服</a></li>
  83.         </ul>
  84.       </div>
  85.     </div>
  86.     <!-- 内容 -->
  87.     <div class="container">
  88.       <div class="left">左侧</div>
  89.       <div class="main">内容</div>
  90.       <div class="right">右侧</div>
  91.     </div>
  92.     <!-- 页脚 -->
  93.     <div class="footer">
  94.       <div class="content">
  95.         <p>安徽小皮教育科技有限公司&copy; | 备案号：皖ICP ********</p>
  96.       </div>
  97.     </div>
  98.   </body>
  99. </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.       li {
  15.         list-style: none;
  16.       }
  17.       a {
  18.         text-decoration: none;
  19.         color: #666;
  20.       }
  21.       /* 页眉和页脚 */
  22.       .header,
  23.       .footer {
  24.         height: 40px;
  25.         background-color: lightblue;
  26.       }
  27.       /* 页脚页眉的内容区 */
  28.       .content {
  29.         width: 960px;
  30.         margin: auto;
  31.       }
  32.       .content ul li {
  33.         float: left;
  34.         line-height: 40px;
  35.         padding: 0 15px;
  36.       }
  37.       .content ul li:hover {
  38.         background-color: coral;
  39.       }
  40.       /* 页脚样式 */
  41.       .content p {
  42.         text-align: center;
  43.         line-height: 40px;
  44.       }
  45.       /* 主体定位 */
  46.       .container {
  47.         width: 960px;
  48.         margin: 10px auto;
  49.         min-height: 600px;
  50.         /* 转为定位元素，做为定位父级 */
  51.         position: relative;
  52.       }
  53.       .container > .left {
  54.         width: 200px;
  55.         background-color: wheat;
  56.         min-height: 600px;
  57.         position: absolute;
  58.         top: 0;
  59.         left: 0;
  60.       }
  61.       .container > .right {
  62.         width: 200px;
  63.         background-color: wheat;
  64.         min-height: 600px;
  65.         position: absolute;
  66.         top: 0;
  67.         right: 0;
  68.       }
  70.       .container > .main {
  71.         background-color: lawngreen;
  72.         min-height: 600px;
  73.         width: 540px;
  74.         position: absolute;
  75.         top: 0;
  76.         left: 210px;
  77.       }
  78.     </style>
  79.   </head>
  80.   <body>
  81.     <!-- 页眉 -->
  82.     <div class="header">
  83.       <div class="content">
  84.         <ul>
  85.           <li><a href="">首页</a></li>
  86.           <li><a href="">618主会场</a></li>
  87.           <li><a href="">在线客服</a></li>
  88.         </ul>
  89.       </div>
  90.     </div>
  91.     <!-- 内容 -->
  92.     <div class="container">
  93.       <div class="left">左侧</div>
  94.       <div class="main">内容</div>
  95.       <div class="right">右侧</div>
  96.     </div>
  97.     <!-- 页脚 -->
  98.     <div class="footer">
  99.       <div class="content">
  100.         <p>安徽小皮教育科技有限公司&copy; | 备案号：皖ICP ********</p>
  101.       </div>
  102.     </div>
  103.   </body>
  104. </html>

效果预览：

综上两种方法都可以达到相同的效果。

上一条：直播源码 视频直播系统源码前期开发搭建你不得不了解的流程下一条：浮动元素高度塌陷产生的原因与解决方案、三列经典布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多