Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 浮动元素高度塌陷、三列经典布局（前端第七课）
Blogger Information
Blog 8
fans 0
comment 0
visits 5437
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
浮动元素高度塌陷、三列经典布局（前端第七课）
不加糖的浓咖啡
Original
699 people have browsed it

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

  • 浮动元素产生高度塌陷的原因
    元素设置浮动属性转化成浮动元素后，会从页面的文档流中脱离出来，也就是其所占用的位置会被释放，由其后面的元素来进行填充，所以会产生高度塌陷的现象。浮动元素有两大特性。浮动元素的浮动方向只能是水平方向，浮动元素的边界仅限于内容区。
  • 用代码来演示浮动元素高度塌陷的解决方案。
  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>Document</title>
  7.     <style>
  8.         .continer{
  9.             border:2px dashed red;
  10.         }
  11.         .item{
  12.             width:200px;
  13.             height: 200px;
  14.         }
  15.         .item:first-of-type{
  16.             background-color: blueviolet;
  17.         }
  18.         .item:nth-child(2){
  19.             background-color: burlywood;
  20.         }
  21.         .item:last-of-type{
  22.             background-color: blue;
  23.         }
  24.         /* 将元素向做浮动 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解决方案一，因为容器中元素添加一个clear属性，可以清除浮动元素的影响，但为了不影响布局结构，我们可以添加一个伪元素来清除影响 ，但不推荐，因为会影响后台数据渲染*/
  29.         .continer::after{
  30.             content: "";
  31.             display:block;
  32.             clear:both;
  33.         }
  34.         /* 解决方案二，最简单的解决方案,用BFC(块级格式化上下文) */
  35.         .continer{
  36.             /* overflow:hidden;用这个方式也可 */
  37.             overflow:auto;
  38.         }
  39.         /* 以上两种方案推荐使用第二种 */
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="continer">
  44.         <div class="item">box1</div>
  45.         <div class="item">box2</div>
  46.         <div class="item">box3</div>
  47.     </div>
  48. </body>
  49. </html>

解决前

解决后

以上解决方案主要运用了css中的clear属性（与伪元素搭配使用，不推荐使用，会影响后台数据渲染）和overflow属性（最简单的解决方案，直接给父容器添加属性）。

利用定位与浮动完成三列经典布局

使用定位实现三列布局

  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.         li{
  16.             list-style: none;
  17.         }
  18.         /* 清除a元素标签的样式，下滑线 */
  19.         a{
  20.             text-decoration: none;
  21.             color:#666;
  22.         }
  23.         /* 设置页眉页脚的背景色及高度 */
  24.         .header,
  25.         .footer{
  26.             background-color:aqua;
  27.             height:40px;
  28.         }
  29.         .content{
  30.             width:960px;
  31.             margin:auto;
  32.         }
  33.         /* 利用浮动实现元素的横向排列 */
  34.         .content ul li{
  35.             float: left;
  36.             line-height: 40px;
  37.             padding: 0 15px;
  38.         }
  39.         /* 页眉鼠标悬停效果 */
  40.         .content ul li:hover{
  41.             background-color:burlywood;
  42.         }
  43.         /* 页脚内容居中 */
  44.         .content p{
  45.             text-align: center;
  46.             line-height:40px;
  47.         }
  48.         /* 页面主体内容，用定位来解决 */
  49.         .continer{
  50.             /* 父级转为定位元素，作为定位父级 */
  51.             position:relative;
  52.             width:960px;
  53.             margin:10px auto;
  54.             /* 主体最小高度 */
  55.             min-height:200px;
  56.         }
  57.         .continer > .left{
  58.             background-color:bisque;
  59.             width:200px;
  60.             min-height:200px;
  61.             /*定位*/
  62.             position:absolute;
  63.             top:0;
  64.             left:0;
  65.         }
  66.         .continer > .right{
  67.             background-color:brown;
  68.             min-height: 200px;
  69.             width:200px;
  70.             /*定位*/
  71.             position:absolute;
  72.             top:0;
  73.             right:0;
  74.         }
  75.         .continer > .margin{
  76.             background-color:cornflowerblue;
  77.             min-height:200px;
  78.             width:540px;
  79.             margin:auto;
  80.             /*定位*/
  81.             position:absolute;
  82.             top:0px;
  83.             left:210px;
  84.         }
  85.     </style>
  86. </head>
  87. <body>
  88.     <div class="header">
  89.         <div class="content">
  90.             <ul>
  91.                 <li><a href="">首页</a></li>
  92.                 <li><a href="">618主会场</a></li>
  93.                 <li><a href="">在线客服</a></li>
  94.             </ul>
  95.         </div>
  96.     </div>
  97.     <div class="continer">
  98.         <div class="left">左侧</div>
  99.         <div class="margin">内容区</div>
  100.         <div class="right">右侧</div>
  101.     </div>
  102.     <div class="footer">
  103.         <div class="content">
  104.             <p>安徽小皮科技有限公司©|备案号：******</p>
  105.         </div>
  106.     </div>
  107. </body>
  108. </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.         li{
  16.             list-style: none;
  17.         }
  18.         /* 清除a元素标签的样式，下滑线 */
  19.         a{
  20.             text-decoration: none;
  21.             color:#666;
  22.         }
  23.         /* 设置页眉页脚的背景色及高度 */
  24.         .header,
  25.         .footer{
  26.             background-color:aqua;
  27.             height:40px;
  28.         }
  29.         .content{
  30.             width:960px;
  31.             margin:auto;
  32.         }
  33.         /* 利用浮动实现元素的横向排列 */
  34.         .content ul li{
  35.             float: left;
  36.             line-height: 40px;
  37.             padding: 0 15px;
  38.         }
  39.         /* 页眉鼠标悬停效果 */
  40.         .content ul li:hover{
  41.             background-color:burlywood;
  42.         }
  43.         /* 页脚内容居中 */
  44.         .content p{
  45.             text-align: center;
  46.             line-height:40px;
  47.         }
  48.         /* 页面主体内容，用定位来解决 */
  49.         .continer{
  50.             /* 父级转为定位元素，作为定位父级 */
  51.             position:relative;
  52.             width:960px;
  53.             margin:10px auto;
  54.             /* 主体最小高度 */
  55.             min-height:200px;
  56.             overflow: hidden;
  57.         }
  58.         .continer > .left{
  59.             background-color:bisque;
  60.             width:200px;
  61.             min-height:200px;
  62.             /* 向左浮动 */
  63.             float:left;
  64.         }
  65.         .continer > .right{
  66.             background-color:brown;
  67.             min-height: 200px;
  68.             width:200px;
  69.             /* 向右浮动 */
  70.             float:right;
  71.         }
  72.         .continer > .margin{
  73.             background-color:cornflowerblue;
  74.             min-height:200px;
  75.             width:540px;
  76.             /* 向左向右浮动都可 */
  77.             float:left;
  78.             /*左侧增加10px外边距使其居中*/
  79.             margin-left:10px;
  80.         }
  81.     </style>
  82. </head>
  83. <body>
  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.     <div class="continer">
  94.         <div class="left">左侧</div>
  95.         <div class="margin">内容区</div>
  96.         <div class="right">右侧</div>
  97.     </div>
  98.     <div class="footer">
  99.         <div class="content">
  100.             <p>安徽小皮科技有限公司©|备案号：******</p>
  101.         </div>
  102.     </div>
  103. </body>
  104. </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