Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 浮动元素高度塌陷原因以及解决方案
Blogger Information
Blog 7
fans 0
comment 0
visits 5092
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
浮动元素高度塌陷原因以及解决方案
我说孟
Original
709 people have browsed it

浮动

" class="reference-link">

  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.       body {
  9.         border: 5px solid #000;
  10.         padding: 20px;
  11.       }
  12.       .box {
  13.         width: 200px;
  14.         height: 200px;
  15.         background: rgb(189, 20, 20);
  16.       }
  17.       .box1 {
  18.         width: 200px;
  19.         height: 200px;
  20.         background: rgb(61, 153, 25);
  21.         float: left;
  22.       }
  23.       .box2 {
  24.         width: 220px;
  25.         height: 220px;
  26.         background: rgb(82, 42, 175);
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="box"></div>
  32.     <div class="box1"></div>
  33.     <div class="box2"></div>
  34.   </body>
  35. </html>`
  36. --------

浮动的知识点：

1.box2浮动之后从文档流中脱离出来(意思就是会释放它原来在文档流中占据的空间)
2.浮动元素浮动之后，它后面的元素会自动填充它让出来空间的大小
3.浮动元素只会影响它后面的元素布局，对前面没有影响
4.行内元素用于最终内容的载体，不能充当容器/父级，不能设置宽高也是无效的
5.任何元素，一旦浮动都自动转为块级元素
6.不让它收到前面的浮动元素影响，可以增加代码：clear:both
7.浮动元素只能水平方向浮动
8.浮动元素的浮动边界仅限于内容区

浮动元素的塌陷与解决方案：

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

使用定位与浮动完成一个三列经典布局

  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.         /* 盒子改变下到边框级 */
  13.         box-sizing: border-box;
  14.       }
  15.       li {
  16.         /* li有样式,把前面的小黑点去掉 */
  17.         list-style: none;
  18.       }
  19.       a {
  20.         /* A标签的下划线去掉 */
  21.         text-decoration: none;
  22.         color: #666;
  23.       }
  24.       /* 页眉与页脚 */
  25.       .header,
  26.       .footer {
  27.         height: 40px;
  28.         background-color: darkcyan;
  29.       }
  30.       .content {
  31.         width: 960px;
  32.         margin: auto;
  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: rgb(231, 180, 13);
  42.       }
  43.       /* 页脚 */
  44.       .content p {
  45.         text-align: center;
  46.         line-height: 40px;
  47.       }
  48.       /* 主体用定位来做 */
  49.       .container {
  50.         width: 960px;
  51.         margin: px auto;
  52.         min-height: 600px;
  53.         /* 阻止浮动元素塌陷 */
  54.         overflow: hidden;
  55.       }
  56.       .container > .left {
  57.         width: 200px;
  58.         background-color: rgb(141, 112, 15);
  59.         min-height: 600px;
  60.         float: left;
  61.       }
  62.       .container > .right {
  63.         width: 200px;
  64.         background-color: rgb(146, 211, 255);
  65.         min-height: 600px;
  66.         float: right;
  67.       }
  68.       .container > .main {
  69.         background: rgb(122, 58, 131);
  70.         min-height: 600px;
  71.         width: 540px;
  72.         float: left;
  73.         margin-left: 10px;
  74.       }
  75.     </style>
  76.   </head>
  77.   <body>
  78.     <!-- 页眉 -->
  79.     <div class="header">
  80.       <div class="content">
  81.         <ul>
  82.           <li><a href="">首页</a></li>
  83.           <li><a href="">会场</a></li>
  84.           <li><a href="">售后</a></li>
  85.         </ul>
  86.       </div>
  87.     </div>
  88.     <!-- 主体 -->
  89.     <div class="container">
  90.       <div class="left">左侧</div>
  91.       <div class="main">内容</div>
  92.       <div class="right">右侧</div>
  93.     </div>
  94.     <!-- 页脚 -->
  95.     <div class="footer">
  96.       <div class="content">
  97.         <p>某某科技有限公司</p>
  98.       </div>
  99.     </div>
  100.   </body>
  101. </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.       .container {
  9.         border: 5px dashed;
  10.         /* 把所有的元素包起来 */
  11.         overflow: hidden;
  12.       }
  13.       .container > * {
  14.         min-height: 400px;
  15.       }
  16.       /* 左右两侧固定 */
  17.       .container > .left,
  18.       .container > .right {
  19.         width: 200px;
  20.         background-color: rgb(236, 178, 53);
  21.       }
  22.       /* 中间样式 */
  23.       .container > .main {
  24.         width: 100%;
  25.         background-color: rgb(72, 176, 218);
  26.       }
  27.       .container > * {
  28.         float: left;
  29.       }
  30.       /* 使用内边距将左右两边的位置挤出来 */
  31.       .container {
  32.         padding-left: 200px;
  33.         padding-right: 200px;
  34.       }
  35.       .container > .left {
  36.         margin-left: -100%;
  37.         /* 使用相对定位将他复位 */
  38.         position: relative;
  39.         top: 0;
  40.         right: 200px;
  41.       }
  42.       .container > .right {
  43.         margin-left: -200px;
  44.         position: relative;
  45.         top: 0;
  46.         left: 200px;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div class="container">
  52.       <!-- 圣杯布局要求主体内容优先渲染 -->
  53.       <div class="main">内容区</div>
  54.       <div class="left">左侧</div>
  55.       <div class="right">右侧</div>
  56.     </div>
  57.   </body>
  58. </html>
Correcting teacher：天蓬老师天蓬老师

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