Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 浮动元素高度塌陷产生的原因及解决方案以及三列经典布局实现
Blogger Information
Blog 40
fans 0
comment 1
visits 39777
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
浮动元素高度塌陷产生的原因及解决方案以及三列经典布局实现
Dong.
Original
837 people have browsed it

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

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

元素浮动的基本特征：（只能水平方向浮动）
1.box浮动之后从文档流中脱离出来（意思就是它会释放原来在文档中占据的空间）
2.浮动元素浮动之后，它后面的元素会自动填充它的空间大小
3.浮动元素只会影响到它后面的元素布局、对前面的元素没有影响
所以当子元素浮动后，父级里变空，就会产生高度上的缺失塌陷。

解决方案 :

以下列举几种方法：
一、解决方法一：
给父元素container也添加一个高度.但当子元素随着内容变化的时候,父元素也需要跟着修改参数;PASS不推荐
二、解决方法二：
.给父元素container也添加一个float浮动,,可行,?但是如果父元素上还有元素的话,那就全部需要添加,也不推荐
三、解决方法三：
在container下添加一个空元素利用清除浮动来解决<div style="clear:both"></div>，这样会造成代码的冗余，不利益后期维护。
四、解决方法四：
在不给页面添加原生HTML代码的情况下利用伪元素来处理！

  1. <style>
  2. .container::after{
  3.     ......
  4.     clear:both;
  5. }
  6. </style>

五、解决方法五：
最简单的方法，直接利用voerflow：hidden;解决！（用到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>

浏览器运行结果：

三列经典布局实现

利用绝对定位实现三列经典布局

  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.         }
  80.     </style>
  81. </head>
  82. <body>
  83.     <!-- 页眉    -->
  84.     <div class="header">
  85.         <div class="content">
  86.             <ul>
  87.                 <li><a href="">首页</a></li>
  88.                 <li><a href="">618主会场</a></li>
  89.                 <li><a href="">联系客服</a></li>
  90.             </ul>
  91.         </div>
  92.     </div>
  93.     <!-- 主体 -->
  94.     <div class="container">
  95.         <div class="left">左侧</div>
  96.         <div class="main">内容</div>
  97.         <div class="right">右侧</div>
  98.     </div>
  99.     <!-- 页脚 -->
  100.     <div class="floot">
  101.         <div class="content">
  102.             <p>php中文网&copy;|备案号：苏ICP备*******</p> 
  103.         </div>
  104.     </div>
  105. </body>
  106. </html>

效果展示：

内容小结

  • 行内元素用于最终的载体，不能充当容器（当父级）。不能试着宽高，设置了也是无效的。
  • 任何元素浮动后自动转为块级元素
Correcting teacher：GuanhuiGuanhui

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