简体中文（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

博客列表 >HTML布局 浮动元素高度塌陷原因及解决方案 定位 浮动实现web三列经典布局

HTML布局 浮动元素高度塌陷原因及解决方案 定位 浮动实现web三列经典布局

写代码的张先森
写代码的张先森原创
2020年06月19日 17:12:171409浏览

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

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.       .container {
  9.         border: 3px dashed red;
  10.       }
  11.       .item {
  12.         width: 150px;
  13.         height: 150px;
  14.       }
  15.       .item:first-of-type {
  16.         background-color: lightgreen;
  17.       }
  18.       .item:nth-last-of-type(2) {
  19.         background-color: lightcoral;
  20.       }
  21.       .item:last-of-type {
  22.         background-color: lightblue;
  23.       }
  25.       /* 将三个子元素全部浮动 */
  26.       .item {
  27.         float: left;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.     </div>
  39.   </body>
  40. </html>

2.两种常用解决方案
好，我们知道了为什么会高度塌陷后，解决方案有四五种，接下来我们讲两种最常用且主流的解决方案：

(1)通过添加一个伪元素来解决

写法例：

  1.  .container::after {
  2.             content: "";
  3.             display: block;
  4.             clear: both;
  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>解决方案1</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-color: lightgreen;
  17.       }
  18.       .item:nth-last-of-type(2) {
  19.         background-color: lightcoral;
  20.       }
  21.       .item:last-of-type {
  22.         background-color: lightblue;
  23.       }
  25.       /* 将三个子元素全部浮动 */
  26.       .item {
  27.         float: left;
  28.       }
  30.       /* 解决方案1： 通过添加一个伪元素来解决 */
  31.       .container::after {
  32.         content: "";
  33.         display: block;
  34.         clear: both;
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <div class="container">
  40.       <div class="item">1</div>
  41.       <div class="item">2</div>
  42.       <div class="item">3</div>
  43.     </div>
  44.   </body>
  45. </html>

(2)最简单的解决方案,用到BFC(块级格式化上下文) 通俗点用一个溢出隐藏的css方法

写法例：

  1.   .container {
  2.         overflow: hidden;
  3.       }

我们可以通过给父元素添加一个overflow: hidden;溢出隐藏来解决高度塌陷的问题

  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>解决方案2</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-color: lightgreen;
  17.       }
  18.       .item:nth-last-of-type(2) {
  19.         background-color: lightcoral;
  20.       }
  21.       .item:last-of-type {
  22.         background-color: lightblue;
  23.       }
  25.       /* 将三个子元素全部浮动 */
  26.       .item {
  27.         float: left;
  28.       }
  29.       /* 解决方案2: 最简单的解决方案,用到BFC(块级格式化上下文) 溢出隐藏 */
  30.       .container {
  31.         overflow: hidden;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">1</div>
  38.       <div class="item">2</div>
  39.       <div class="item">3</div>
  40.     </div>
  41.   </body>
  42. </html>

讲完了浮动高度塌陷的问题接下来我们实战定位和浮动做web经典的三列布局

二、运用定位和浮动知识实战三列布局

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.       }
  22.       /* 页眉与页脚 */
  23.       .header,
  24.       .footer {
  25.         height: 40px;
  26.         background-color: black;
  27.       }
  28.       /* 页眉与页脚的内容区 */
  29.       .content {
  30.         width: 960px;
  31.         margin: auto;
  32.       }
  34.       .content ul li {
  35.         float: left;
  36.         line-height: 40px;
  37.         padding: 0 15px;
  38.       }
  39.       .content ul li a {
  40.         display: block;
  41.         width: 100%;
  42.         height: 100%;
  43.         color: white;
  44.         box-sizing: content-box;
  45.       }
  46.       .content ul li:hover {
  47.         background-color: white;
  48.         color: black;
  49.       }
  50.       .content ul li a:hover {
  51.         color: black;
  52.       }
  53.       /* 页脚样式 */
  54.       .content p {
  55.         text-align: center;
  56.         line-height: 40px;
  57.         color: white;
  58.       }
  60.       /* 主体用定位 */
  61.       .container {
  62.         width: 960px;
  63.         margin: 10px auto;
  64.         min-height: 600px;
  65.         /* 转为定位元素，做为定位父级 */
  66.         position: relative;
  67.       }
  69.       .container > .left {
  70.         width: 200px;
  71.         background-image: url("111.jpg");
  72.         background-size: 100%;
  73.         min-height: 600px;
  74.         position: absolute;
  75.         top: 0;
  76.         left: 0;
  77.       }
  79.       .container > .right {
  80.         width: 200px;
  81.         background-image: url("222.jpg");
  82.         background-size: 100%;
  83.         min-height: 600px;
  84.         position: absolute;
  85.         top: 0;
  86.         right: 0;
  87.       }
  89.       .container > .main {
  90.         background-color: lightgreen;
  91.         min-height: 600px;
  92.         width: 540px;
  93.         position: absolute;
  94.         top: 0;
  95.         left: 210px;
  96.       }
  97.     </style>
  98.   </head>
  99.   <body>
  100.     <!-- 页眉 -->
  101.     <div class="header">
  102.       <!-- 内容区: 水平居中 -->
  103.       <div class="content">
  104.         <ul>
  105.           <li><a href="">首页</a></li>
  106.           <li><a href="">电脑办公</a></li>
  107.           <li><a href="">家装</a></li>
  108.           <li><a href="">食品</a></li>
  109.           <li><a href="">生鲜</a></li>
  110.           <li><a href="">手机</a></li>
  111.           <li><a href="">数码</a></li>
  112.         </ul>
  113.       </div>
  114.     </div>
  116.     <!-- 主体 -->
  117.     <div class="container">
  118.       <div class="left">左侧</div>
  119.       <div class="main">内容区</div>
  120.       <div class="right">右侧</div>
  121.     </div>
  123.     <!-- 页脚 -->
  124.     <div class="footer">
  125.       <div class="content">
  126.         <p>北京XXXX科技发展有限公司&copy; | 备案号: 京ICP *********</p>
  127.       </div>
  128.     </div>
  129.   </body>
  130. </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.       }
  22.       /* 页眉与页脚 */
  23.       .header,
  24.       .footer {
  25.         height: 40px;
  26.         background-color: lightblue;
  27.       }
  28.       /* 页眉与页脚的内容区 */
  29.       .content {
  30.         width: 960px;
  31.         margin: auto;
  32.       }
  34.       .content ul li {
  35.         float: left;
  36.         line-height: 40px;
  37.         padding: 0 15px;
  38.       }
  39.       .content ul li:hover {
  40.         background-color: coral;
  41.       }
  42.       /* 页脚样式 */
  43.       .content p {
  44.         text-align: center;
  45.         line-height: 40px;
  46.       }
  48.       /* 主体用定位 */
  49.       .container {
  50.         width: 960px;
  51.         margin: 10px auto;
  52.         min-height: 600px;
  53.         /* 防止浮动元素的高度塌陷 */
  54.         overflow: hidden;
  55.       }
  57.       .container > .left {
  58.         width: 200px;
  59.         background-image: url("111.jpg");
  60.         background-size: 100%;
  61.         min-height: 600px;
  62.         float: left;
  63.       }
  65.       .container > .right {
  66.         width: 200px;
  67.         background-image: url("222.jpg");
  68.         background-size: 100%;
  69.         min-height: 600px;
  70.         float: right;
  71.       }
  73.       .container > .main {
  74.         background-color: lightgreen;
  75.         min-height: 600px;
  76.         width: 540px;
  77.         float: left;
  78.         margin-left: 10px;
  79.       }
  80.     </style>
  81.   </head>
  82.   <body>
  83.     <!-- 页眉 -->
  84.     <div class="header">
  85.       <!-- 内容区: 水平居中 -->
  86.       <div class="content">
  87.         <ul>
  88.           <li><a href="">首页</a></li>
  89.           <li><a href="">电脑办公</a></li>
  90.           <li><a href="">家装</a></li>
  91.           <li><a href="">食品</a></li>
  92.           <li><a href="">生鲜</a></li>
  93.           <li><a href="">手机</a></li>
  94.           <li><a href="">数码</a></li>
  95.         </ul>
  96.       </div>
  97.     </div>
  99.     <!-- 主体 -->
  100.     <div class="container">
  101.       <div class="left">左侧</div>
  102.       <div class="main">内容区</div>
  103.       <div class="right">右侧</div>
  104.     </div>
  106.     <!-- 页脚 -->
  107.     <div class="footer">
  108.       <div class="content">
  109.         <p>北京XXXX科技发展有限公司&copy; | 备案号: 京ICP *********</p>
  110.       </div>
  111.     </div>
  112.   </body>
  113. </html>

效果图：

两种布局方法主要是css浮动和定位元素的变化，认真看css代码

小结

1.web页面布局技术常用到浮动和定位，一定要深刻理解浮动和定位知识
2.理解浮动的原理 会解决浮动后高度塌陷的问题
3.动手实践利用定位和浮动技术实现通用的三列布局方法

上一条：使用 overflow 给元素定位与浮动完成三列经典布局学习总结下一条：浮动及使用定位与浮动完成一个三列经典布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多