Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 清除元素浮动的几种方法及经典布局实现
Blogger Information
Blog 26
fans 2
comment 0
visits 24277
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
清除元素浮动的几种方法及经典布局实现
leverWang
Original
547 people have browsed it

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

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

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

解决方案:

  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>
Correcting teacher：WJWJ

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