Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 06-18作业 浮动元素高度导致塌陷的原因及解决方法！并且实现一个三列经典布局；
Blogger Information
Blog 21
fans 0
comment 1
visits 19073
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
06-18作业 浮动元素高度导致塌陷的原因及解决方法！并且实现一个三列经典布局；
XFY_肆意De...
Original
662 people have browsed it
浮动问题导致的塌陷问题…
  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>Document</title>
  7.   </head>
  8.   <style>
  9.     .container {
  10.       border: 3px red solid;
  11.     }
  12.     .item {
  13.       width: 200px;
  14.       height: 200px;
  15.       border: 1px solid #333;
  16.     }
  17.   </style>
  18.   <body>
  19.     <div class="container">
  20.       <div class="item">1</div>
  21.       <div class="item">2</div>
  22.       <div class="item">3</div>
  23.     </div>
  24.   </body>
  25. </html>

当我人为的设置了item的浮动之后就会发现容器container的外边框没有包裹住里面的item的所有的DIV了，如图所示；


如何解决这个问题呢？
以下列举几种方法：
一、解决方法一：
给父元素container也添加一个高度.但当子元素随着内容变化的时候,父元素也需要跟着修改参数;PASS不推荐
二、解决方法二：
.给父元素container也添加一个float浮动,,可行,?但是如果父元素上还有元素的话,那就全部需要添加,也不推荐
三、解决方法三：
在container下添加一个空元素利用清除浮动来解决<div style="clear:both"></div>，这样会造成代码的冗余，不利益后期维护。
四、解决方法四：
在不给页面添加原生HTML代码的情况下利用伪元素来处理！

  1. <style>
  2. .container::after{
  3.     ......
  4.     clear:both;
  5. }
  6. </style>

五、解决方法五：
最简单的方法，直接利用voerflow：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>Document</title>
  7.   </head>
  8.   <style>
  9.     /* 清除所有元素的内外边距*/
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.       border-sizing:border;
  14.     }
  15.     /* 父盒子 */
  16.     .box {
  17.       background-color: #ccc;
  18.       width: 100%;
  19.       min-height: 300px;
  20.       overflow: hidden; /* 清除浮动*/
  21.     }
  22.     /* 左盒子 */
  23.     .box_left {
  24.       width: 160px;
  25.       height: 300px;
  26.       background-color:lightseagreen;
  27.       float: left;
  28.     }
  29.     /* 右盒子 */
  30.     .box_right {
  31.         width: 160px;
  32.       height: 300px;
  33.       background-color:lightsalmon;
  34.       float: right;
  35.     }
  36.     /* 中盒子-自适应*/
  37.     .box_main {
  38.         border:1px red solid;
  39.       height: 300px;
  40.       width:100%;
  41.       background-color:lemonchiffon;
  42.     }
  43.   </style>
  44. </head>
  45. <body>
  46.   <div class="box">
  47.     <div class="box_left"></div>
  48.     <div class="box_right"></div>
  49.     <div class="box_main"></div>
  50.   </div>
  51.   </body>
  52. </html>

定位实现三列布局：
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="zh-cn" />
  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.       /* 父盒子 */
  14.       .box {
  15.         background-color: #ccc;
  16.         width: 100%;
  17.         min-height: 600px;
  18.         position: relative;
  19.       }
  20.       /* 左盒子 */
  21.       .box_left {
  22.         width: 160px;
  23.         height: 600px;
  24.         background-color: lightseagreen;
  25.         position: absolute;
  26.         top:0;
  27.         left: 0;
  28.       }
  29.       /* 右盒子 */
  30.       .box_right {
  31.         width: 160px;
  32.         height: 600px;
  33.         background-color: lightsalmon;
  34.         position: absolute;
  35.         top: 0;
  36.         right: 0;
  37.       }
  38.       /* 中盒子-自适应*/
  39.       .box_main {
  40.         height: 600px;
  41.          background-color: lemonchiffon;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="box">
  47.       <div class="box_left">左</div>
  48.       <div class="box_right">右</div>
  49.       <div class="box_main">中（自适应窗口）</div>
  50.     </div>
  51.   </body>
  52. </html>

总结：
根据以上二个实战，如果自己采用浮动的布局方式，就要考虑全局的页面调整，用到clear:both去清除多余的浮动；
如果用定位的方式去布局的话，个人感觉，更加简单！

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