search

博客列表 >清除元素浮动的几种方法及经典布局实现

清除元素浮动的几种方法及经典布局实现

leverWang
leverWang原创
2020年06月19日 15:51:17546浏览

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

设置浮动后父级元素高度塌陷，高度塌陷产生的原因:元素浮动后脱离了文档流，无法撑开父级元素

清除浮动后父级元素高度被子元素重新撑开

解决方案:

  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>Document</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  14.         .container {
  15.             width: 1200px;
  16.             border: 3px solid rgb(187, 0, 0);
  17.         }
  19.         /* 方案1 ，为父级元素添加高度 */
  20.         /* .container {
  21.             height: 200px;
  22.         } */
  24.         /* 方案2 为父级元素添加浮动 */
  25.         /* .container {
  26.             float: left;
  27.         } */
  29.         /* 方案3，为父级元素添加伪类 */
  30.         /* .container:after {
  31.             content: '.';
  32.             display: block;
  33.             clear: both;
  34.         } */
  36.         /* 方案4，为父级元素 overflow: hidden */
  37.         .container {
  38.             overflow: hidden;
  39.         }
  41.         .item {
  42.             float: left;
  43.             width: 200px;
  44.             height: 200px;
  45.             margin-left: 20px;
  46.         }
  48.         .item:first-of-type {
  49.             background: lightpink;
  50.         }
  52.         .item:nth-of-type(2) {
  53.             background: lightcyan;
  54.         }
  56.         .item:last-of-type {
  57.             background: lightgreen;
  58.         }
  59.     </style>
  60. </head>
  62. <body>
  63.     <div class="container">
  64.         <div class="item"></div>
  65.         <div class="item"></div>
  66.         <div class="item"></div>
  67.     </div>
  68. </body>
  70. </html>

利用浮动和定位实现经典圣杯布局

  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.             padding: 0;
  11.             margin: 0;
  12.         }
  16.         .header,
  17.         .footer {
  18.             width: 100%;
  19.             height: 100px;
  20.             background: lightslategray;
  21.         }
  23.         /* container设置 内边距 给left和right空出位置 */
  24.         .container {
  25.             overflow: hidden;
  26.             padding: 0 200px;
  27.             min-width: 500px;
  28.         }
  30.         /* 为元素设置浮动和相对定位 */
  31.         .container>div {
  32.             float: left;
  33.             position: relative;
  34.         }
  36.         .container>.center {
  37.             background: lightpink;
  38.             height: 500px;
  39.             width: 100%;
  41.         }
  43.         .left,
  44.         .right {
  45.             width: 200px;
  46.             height: 500px;
  47.             background: lightseagreen;
  48.         }
  50.         /* 设置left的 margin-left: -100%;，让left回到上一行最左侧 */
  51.         .left {
  52.             margin-left: -100%;
  53.             left: -200px;
  54.         }
  56.         /* right的 margin-的: -200px;，让right的回到上一行最右侧 */
  57.         .right {
  58.             margin-right: -200px;
  60.         }
  61.     </style>
  62. </head>
  64. <body>
  65.     <div class="header">头部</div>
  66.     <div class="container">
  67.         <div class="center">内容</div>
  68.         <div class="left">左边</div>
  70.         <div class="right">右边</div>
  71.     </div>
  72.     <div class="footer">底部</div>
  73. </body>
  75. </html>
上一条：选择器的使用事例下一条：浮动元素高度塌陷产生的原因与解决方案/定位与浮动完成一个三列经典布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多