search

博客列表 >浮动元素塌陷处理与经典布局

浮动元素塌陷处理与经典布局

new
new原创
2020年06月22日 17:30:24523浏览

1.浮动元素使其父元素高度塌陷与解决方案

  • 我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。

浮动元素使其父元素高度塌陷示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>浮动元素的高度塌陷</title>
  8.     <style>
  9.         .container {
  10.             border: 3px dashed red;
  11.         }
  13.         .item {
  14.             width: 150px;
  15.             height: 150px;
  16.         }
  18.         .item:first-of-type {
  19.             background-color: lightgreen;
  20.         }
  22.         .item:nth-last-of-type(2) {
  23.             background-color: lightcoral;
  24.         }
  26.         .item:last-of-type {
  27.             background-color: lightblue;
  28.         }
  30.         /* 将三个子元素全部浮动 */
  31.         .item {
  32.             float: left;
  33.         }
  34.     </style>
  35. </head>
  37. <body>
  38.     <!-- <div class="box"> -->
  39.     <div class="container">
  40.         <div class="item">1</div>
  41.         <div class="item">2</div>
  42.         <div class="item">3</div>
  43.         <!-- <div class="clear"></div> -->
  44.     </div>
  45.     <!-- </div> -->
  46. </body>
  48. </html>

如图

  • 解决方案1：给父元素添加一个高度，缺点此方法无法自适应.
  • 解决方案2:把父元素浮动起来 ,会产生传导效应，级数越多很麻烦.
  • 解决方案3: 添加一个专用元素用于清浮动 ,但依赖DOM结构
  • 解决方案4： 添加一个伪元素来解决，也可以
  • 解决方案5: 最简单的解决方案,加overflow属性（hidden/auto）

示例代码

  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.       }
  30.       /* 解决方案1: 给父元素也添加一个高度 */
  31.       /* .container { */
  32.       /* height: 150px; */
  33.       /* } */
  35.       /* 解决方案2: 把父元素也浮动起来 */
  36.       /* .container {
  37.         float: left;
  38.       }
  39.       .box {
  40.           float: left;
  41.       } */
  43.       /* 解决方案3: 添加一个专用元素用于清浮动 */
  44.       /* div.clear {
  45.         clear: both;
  46.       } */
  48.       /* 解决方案4： 通过添加一个伪元素来解决 */
  49.       /* .container::after {
  50.         content: "";
  51.         display: block;
  52.         clear: both;
  53.       } */
  55.       /* 解决方案5: 最简单的解决方案,用到BFC(块级格式化上下文) */
  56.       .container {
  57.         /* overflow: hidden; */
  58.         overflow: auto;
  59.       }
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <div class="container">
  64.       <div class="item">1</div>
  65.       <div class="item">2</div>
  66.       <div class="item">3</div>
  67.     </div>
  68.   </body>
  69. </html>

如图

2.浮动实现三列布局

  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>浮动布局</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         .header,
  15.         .footer {
  16.             width: 960px;
  17.             height: 50px;
  18.             background: red;
  19.             margin: 0 auto;
  20.         }
  22.         .main {
  23.             height: 600px;
  24.             width: 960px;
  25.             margin: 10px auto;
  26.         }
  28.         .left,
  29.         .right {
  30.             min-width: 190px;
  31.             min-height: 600px;
  32.             background: rgb(40, 231, 14);
  33.         }
  35.         .main>* {
  36.             float: left;
  37.         }
  40.         .content {
  41.             min-width: 560px;
  42.             min-height: 600px;
  43.             background: rgb(29, 1, 27);
  44.             margin: 0 10px;
  45.         }
  46.     </style>
  47. </head>
  49. <body>
  50.     <!-- 头部 -->
  51.     <div class="header"></div>
  52.     <!-- 主体 -->
  53.     <div class="main">
  54.         <div class="left"></div>
  55.         <div class="content"></div>
  56.         <div class="right"></div>
  57.     </div>
  58.     <!-- 尾部 -->
  59.     <div class="footer"></div>
  60. </body>
  62. </html>

如图

3.圣杯布局，两边固定，中间自适应。

  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title></title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         .header,
  15.         .footer {
  16.             width: 960px;
  17.             height: 50px;
  18.             background: rgb(144, 238, 230);
  19.             margin: 0 auto;
  20.         }
  22.         .main {
  23.             height: 600px;
  24.             width: 960px;
  25.             margin: 10px auto;
  26.         }
  28.         .left,
  29.         .right {
  30.             width: 190px;
  31.             height: 600px;
  32.             background: rgb(255, 211, 181);
  33.         }
  35.         .main>* {
  36.             float: left;
  37.         }
  39.         .left {
  40.             margin-left: -100%;
  41.         }
  43.         .right {
  44.             margin-left: -190px;
  45.             position: relative;
  46.             top: 0;
  47.         }
  49.         .content {
  50.             width: 100%;
  51.             height: 600px;
  52.             background: rgb(238, 175, 235);
  53.             padding: 0 -200px;
  54.         }
  55.     </style>
  56. </head>
  58. <body>
  59.     <!-- 头部 -->
  60.     <div class="header"></div>
  61.     <!-- 主体 -->
  62.     <div class="main">
  63.         <div class="content"></div>
  64.         <div class="left"></div>
  65.         <div class="right"></div>
  66.     </div>
  67.     <!-- 尾部 -->
  68.     <div class="footer"></div>
  69. </body>
  71. </html>

如图

4.用grid网格布局

  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title></title>
  8.     <style>
  9.         body {
  10.             display: grid;
  11.             grid-template-columns: 200px 1fr 200px;
  12.             grid-template-rows: 40px 500px 40px;
  13.         }
  15.         /* 轮廓线 */
  16.         body>* {
  17.             outline: 1px dashed red;
  18.         }
  20.         .header,
  21.         .footer {
  22.             grid-column-end: span 4;
  23.         }
  24.     </style>
  25. </head>
  27. <body>
  28.     <!-- 头部 -->
  29.     <div class="header"></div>
  30.     <!-- 主体 -->
  31.     <div class="content"></div>
  32.     <div class="left"></div>
  33.     <div class="right"></div>
  34.     <!-- 尾部 -->
  35.     <div class="footer"></div>
  36. </body>
  38. </html>

如图

上一条：背景控制的常用属性 精灵图原理及用法 阿里字体图标的完整引用流程下一条：css3选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多