search

博客列表 >浮动元素高度塌陷产生的原因与解决方案，以及使用定位与浮动完成一个三列经典布局

浮动元素高度塌陷产生的原因与解决方案，以及使用定位与浮动完成一个三列经典布局

浪子修罗记录有趣的事
浪子修罗记录有趣的事原创
2020年06月19日 00:06:24661浏览

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

  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: 2px dashed red;
  10.       }
  11.       .item {
  12.         width: 150px;
  13.         height: 150px;
  14.       }
  15.       /* 使用伪类顺序选择 */
  16.       .item:nth-child(1) {
  17.         background-color: blueviolet;
  18.       }
  19.       .item:nth-child(2) {
  20.         background-color: brown;
  21.       }
  22.       .item:nth-child(3) {
  23.         background-color: cadetblue;
  24.       }
  25.       /* 将三个子元素全部浮动 */
  26.       .item {
  27.         float: left;
  28.       }
  29.       /* 父元素包不住子元素，高度塌陷 */
  30.       /* =============================== */
  31.       /* 解决方案1：给父元素也添加一个高度 */
  32.       /* .container {
  33.         height: 150px;
  34.         该方案没办法做到自适应，如果item改变高度，那这个父元素也要随着改动，很麻烦
  35.       } */
  36.       /* ============================== */
  37.       /* 解决方案2：把父元素也浮动起来 */
  38.       /* .container {
  39.         float: left;
  40.         该方案如果还有父级元素的话，就要逐级向上把父元素也浮动，添加很麻烦
  41.         该现象叫浮动传导效应
  42.       } */
  43.       /* 解决方案3：添加一个专用清浮动的元素 */
  44.       /* .clear {
  45.         clear: both;
  46.         由于要改动前端页面结构，影响后端数据渲染。所以不推荐使用。
  47.       } */
  48.       /* 解决方案4：通过添加一个伪元素来解决 */
  49.       /* 在.container最后添加一个伪元素 */
  50.       /* .container::after {
  51.         内容为空
  52.         content: "";
  53.         样式为块
  54.         display: block;
  55.         清浮动
  56.         clear: both;
  57.       } */
  58.       /* 解决方案5：（最为常用）用到 BFC(块级格式化上下文) */
  59.       .container {
  60.         /* 常用 */
  61.         overflow: hidden;
  62.         /* 也可以用到 */
  63.         /* overflow: auto; */
  64.       }
  65.     </style>
  66.   </head>
  67.   <body>
  68.     <div class="container">
  69.       <div class="item">1</div>
  70.       <div class="item">2</div>
  71.       <div class="item">3</div>
  72.       <!-- <div class="clear"></div> -->
  73.     </div>
  74.   </body>
  75. </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: lightslategrey;
  20.       }
  21.       .header,
  22.       .footer {
  23.         height: 60px;
  24.         background-color: limegreen;
  25.       }
  26.       /* 页眉页脚的内容区 */
  27.       .content {
  28.         width: 960px;
  29.         margin: auto;
  30.         background-color: magenta;
  31.       }
  32.       .content ul li {
  33.         float: left;
  34.         line-height: 60px;
  35.         padding: 0 25px;
  36.       }
  37.       /* 导航条鼠标悬停 */
  38.       .content ul li:hover {
  39.         background-color: mediumblue;
  40.       }
  41.       /* 页脚样式 */
  42.       .content p {
  43.         text-align: center;
  44.         line-height: 60px;
  45.       }
  46.       /* 主体用定位 */
  47.       .container {
  48.         width: 960px;
  49.         margin: auto;
  50.         background-color: mediumslateblue;
  51.         /* 最小高度为500px */
  52.         min-height: 500px;
  53.         /* 转为定位元素，做为定位父级 */
  54.         position: relative;
  55.       }
  56.       .container > .left {
  57.         width: 200px;
  58.         background-color: olive;
  59.         min-height: 500px;
  60.         /* 绝对定位 */
  61.         position: absolute;
  62.         top: 0;
  63.         left: 0;
  64.       }
  65.       .container > .right {
  66.         width: 200px;
  67.         background-color: olive;
  68.         min-height: 500px;
  69.         /* 绝对定位 */
  70.         position: absolute;
  71.         top: 0;
  72.         right: 0;
  73.       }
  74.       .container > .main {
  75.         background-color: orange;
  76.         min-height: 500px;
  77.         width: 560px;
  78.         /* 绝对定位 */
  79.         position: absolute;
  80.         top: 0;
  81.         left: 200px;
  82.       }
  83.     </style>
  84.   </head>
  85.   <body>
  86.     <!-- 页眉 -->
  87.     <div class="header">
  88.       <div class="content">
  89.         <ul>
  90.           <li><a href="">首页</a></li>
  91.           <li><a href="">618主会场</a></li>
  92.           <li><a href="">在线客服</a></li>
  93.           <li><a href="">618主会场</a></li>
  94.           <li><a href="">在线客服</a></li>
  95.         </ul>
  96.       </div>
  97.     </div>
  98.     <!-- 主体 -->
  99.     <div class="container">
  100.       <div class="left">左</div>
  101.       <div class="main">中</div>
  102.       <div class="right">右</div>
  103.     </div>
  104.     <!-- 页脚 -->
  105.     <div class="footer">
  106.       <div class="content">
  107.         <p>大赤水网&copy; ICP备案号：000000000</p>
  108.       </div>
  109.     </div>
  110.   </body>
  111. </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: lightslategrey;
  20.       }
  21.       .header,
  22.       .footer {
  23.         height: 60px;
  24.         background-color: limegreen;
  25.       }
  26.       /* 页眉页脚的内容区 */
  27.       .content {
  28.         width: 960px;
  29.         margin: auto;
  30.         background-color: magenta;
  31.       }
  32.       .content ul li {
  33.         float: left;
  34.         line-height: 60px;
  35.         padding: 0 25px;
  36.       }
  37.       /* 导航条鼠标悬停 */
  38.       .content ul li:hover {
  39.         background-color: mediumblue;
  40.       }
  41.       /* 页脚样式 */
  42.       .content p {
  43.         text-align: center;
  44.         line-height: 60px;
  45.       }
  46.       /* 主体用定位 */
  47.       .container {
  48.         width: 960px;
  49.         margin: auto;
  50.         background-color: mediumslateblue;
  51.         /* 最小高度为500px */
  52.         min-height: 500px;
  53.         /* 防止浮动元素的高度塌陷 */
  54.         overflow: hidden;
  55.       }
  56.       .container > .left {
  57.         width: 200px;
  58.         background-color: olive;
  59.         min-height: 500px;
  60.         /* 浮动 */
  61.         float: left;
  62.       }
  63.       .container > .right {
  64.         width: 200px;
  65.         background-color: olive;
  66.         min-height: 500px;
  67.         /* 浮动*/
  68.         float: left;
  69.       }
  70.       .container > .main {
  71.         background-color: orange;
  72.         min-height: 500px;
  73.         width: 560px;
  74.         /* 浮动*/
  75.         float: left;
  76.       }
  77.     </style>
  78.   </head>
  79.   <body>
  80.     <!-- 页眉 -->
  81.     <div class="header">
  82.       <div class="content">
  83.         <ul>
  84.           <li><a href="">首页</a></li>
  85.           <li><a href="">618主会场</a></li>
  86.           <li><a href="">在线客服</a></li>
  87.           <li><a href="">618主会场</a></li>
  88.           <li><a href="">在线客服</a></li>
  89.         </ul>
  90.       </div>
  91.     </div>
  92.     <!-- 主体 -->
  93.     <div class="container">
  94.       <div class="left">左</div>
  95.       <div class="main">中</div>
  96.       <div class="right">右</div>
  97.     </div>
  98.     <!-- 页脚 -->
  99.     <div class="footer">
  100.       <div class="content">
  101.         <p>大赤水网&copy; ICP备案号：000000000</p>
  102.       </div>
  103.     </div>
  104.   </body>
  105. </html>

浮动不推荐使用。布局会出现不可预测的变化。

上一条：盒模型的常用属性讲解与元素大小的重新结算下一条：代码编辑器与PHPSTUDY的安装与配置过程（前端第一课）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多