Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 浮动元素高度产生塌陷的原因及解决方案+定位元素经典3列布局实现
Blogger Information
Blog 13
fans 0
comment 0
visits 13151
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
浮动元素高度产生塌陷的原因及解决方案+定位元素经典3列布局实现
小追
Original
1171 people have browsed it

浮动元素引起的高度坍塌与解决方案

元素浮动后高度塌陷的原因：

元素浮动的3个定义

1.元素浮动后从文档流中脱离出来（意思是它会释放出它原来占据的空间）；

2元素浮动后，它后面元素会自动填充到它原来的位置；

3浮动元素只会影响到它后面的元素布局，对前面没有影响。

所以当子元素浮动后，父级里变空，就会产生高度上的缺失塌陷。

解决方案：

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.         }
  24.         /* 给3个item都浮动会发现父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解决办法：
  29.         1给.container一个高度，这是很不好的，不要这么用 
  30.         .container{
  31.              height:150px;
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="container">
  36.         <div class="item">1</div>
  37.         <div class="item">2</div>
  38.         <div class="item">3</div>
  39.     </div>
  40. </body>
  41. </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.         .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.         }
  24.         /* 给3个item都浮动会发现父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 2给父级也进行浮动，如果这个父级还有好多个父级会产生传导效应，就很不好了 */
  29.         .container{
  30.             float:left;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="main">    
  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.     </div>
  43. </body>
  44. </html>

结果：

会发现如果这个父元素还有它的父元素，那么它的父元素高度将会崩塌，如果有很多个父元素就更麻烦了，所以这也是不好的；

3.添加一个专用元素用来清浮动：

  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.         }
  24.         /* 给3个item都浮动会发现父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解决办法：
  29.         3添加一个专用元素用来清浮动，这样对后面渲染也不好 */
  30.         .clear{
  31.             clear:both;
  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 class="clear"></div> 
  42.     </div>
  43. </body>
  44. </html>

结果：

可以看到代码乱掉了，要修正需要添加不少代码，对后期渲染很不友好；

4.添加一个伪元素来解决：

  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.         }
  24.         /* 给3个item都浮动会发现父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解决办法：
  29.         /* 4添加一个伪元素来解决 */
  30.         .container::after{
  31.             content:"";
  32.             display:block;
  33.             clear:both;
  34.         }
  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>

结果

看着是可行的，但是和方法1是差不多的；

5.使用BFC块级格式化上下文：

  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.         }
  24.         /* 给3个item都浮动会发现父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解决办法：
  29.         /* 5最简单的解决办法 用到BFC块级格式化上下文*/
  30.         .container{
  31.             /* 可行1 */
  32.             overflow:auto;
  33.             /* 可行2 */
  34.             overflow:hidden;
  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>

结果
可以看到这是最简单的方法。

绝对定位实现经典3列布局

  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, .floot{
  23.             height:40px;
  24.             background-color:lightblue;
  25.         }
  26.         /* 页头页脚内容区基本样式 */
  27.         .content{
  28.             width:960px;
  29.             margin:auto;
  30.         }
  31.         /* 页头里的li的样式 */
  32.         .content ul li{
  33.             float:left;
  34.             padding:0 15px;
  35.             /* line-height:行间距离，就是行高 */
  36.             line-height:40px;
  37.         }
  38.         .content ul li:hover{
  39.             background-color:coral;
  40.         }
  41.         /* 页脚 */
  42.         .content p{
  43.             /* text-align水平对齐方式 */
  44.             text-align:center;
  45.             line-height:40px;
  46.         }
  47.         /* 内容区用定位做 */
  48.         .container{
  49.             width:960px;
  50.             margin:10px auto;
  51.             /* 最小高度，以后写页面尽量用这样的方式去写，这样页面能撑开不会显得丑 */
  52.             min-height:600px;
  53.             /* 转为父级定位 */
  54.             position:relative;
  55.         }
  56.         .container>.left{
  57.             width:200px;
  58.             background-color:wheat;
  59.             min-height:600px;
  60.             position:absolute;
  61.             top:0;
  62.             left:0;
  63.         }   
  64.         .container > .main{
  65.             width:540px;
  66.             background-color:lightgreen;
  67.             min-height:600px;
  68.             position:absolute;
  69.             top:0;
  70.             left:210px;
  71.         }
  72.         .container>.right{
  73.             width:200px;
  74.             background-color:wheat;
  75.             min-height:600px;
  76.             position:absolute;
  77.             top:0;
  78.             right:0;
  79.         }
  81.     </style>
  82. </head>
  83. <body>
  84.     <!-- 页眉    -->
  85.     <div class="header">
  86.         <div class="content">
  87.             <ul>
  88.                 <li><a href="">首页</a></li>
  89.                 <li><a href="">618主会场</a></li>
  90.                 <li><a href="">联系客服</a></li>
  91.             </ul>
  92.         </div>
  93.     </div>
  94.     <!-- 主体 -->
  95.     <div class="container">
  96.         <div class="left">左侧</div>
  97.         <div class="main">内容</div>
  98.         <div class="right">右侧</div>
  99.     </div>
  100.     <!-- 页脚 -->
  101.     <div class="floot">
  102.         <div class="content">
  103.             <p>php中文网&copy;|备案号：苏ICP备*******</p> 
  104.         </div>
  105.     </div>
  106. </body>
  107. </html>

效果图：

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