search

博客列表 >浮动元素高度塌陷、三列经典布局（前端第七课）

浮动元素高度塌陷、三列经典布局（前端第七课）

不加糖的浓咖啡
不加糖的浓咖啡原创
2020年06月29日 23:56:22702浏览

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

  • 浮动元素产生高度塌陷的原因
    元素设置浮动属性转化成浮动元素后，会从页面的文档流中脱离出来，也就是其所占用的位置会被释放，由其后面的元素来进行填充，所以会产生高度塌陷的现象。浮动元素有两大特性。浮动元素的浮动方向只能是水平方向，浮动元素的边界仅限于内容区。
  • 用代码来演示浮动元素高度塌陷的解决方案。
  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>


定位实现三列布局主要使用绝对定位来实现。浮动实现三列布局要注意不可确定性太多，所以现今的布局基本上不用。

上一条：flex实现PC端通用布局方案与移动端主页布局(高仿小米商城app主页静态)下一条：事件监听、冒泡、捕获、代理、委托
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多