Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML布局 浮动元素高度塌陷原因及解决方案 定位 浮动实现web三列经典布局
Blogger Information
Blog 11
fans 0
comment 0
visits 12886
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML布局 浮动元素高度塌陷原因及解决方案 定位 浮动实现web三列经典布局
写代码的张先森
Original
1421 people have browsed it

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

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.动手实践利用定位和浮动技术实现通用的三列布局方法

Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：写的非常不错认真，继续加油！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post