search

博客列表 >浮动元素高度塌陷产生的原因及解决方案以及三列经典布局实现

浮动元素高度塌陷产生的原因及解决方案以及三列经典布局实现

Dong.
Dong.原创
2020年06月22日 14:46:48838浏览

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

元素浮动后高度塌陷产生的原因：

元素浮动的基本特征：（只能水平方向浮动）
1.box浮动之后从文档流中脱离出来（意思就是它会释放原来在文档中占据的空间）
2.浮动元素浮动之后，它后面的元素会自动填充它的空间大小
3.浮动元素只会影响到它后面的元素布局、对前面的元素没有影响
所以当子元素浮动后，父级里变空，就会产生高度上的缺失塌陷。

解决方案 :

以下列举几种方法：
一、解决方法一：
给父元素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;解决！（用到BFC）(最简单)

  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:3px dashed red;
  10.         }
  11.         .item{
  12.             width: 150px;
  13.             height: 150px;
  14.         }
  15.         .item:first-of-type{
  16.             background-color:lightgreen;
  17.         }
  18.         .item:nth-last-of-type(2){
  19.             background-color:lightcoral;
  20.         }
  21.         .item:last-of-type{
  22.             background-color:lightblue;
  23.         }
  24.         /* 给3个item都浮动会发现父元素包不住子元素了 */
  25.         .item{
  26.             float:left;
  27.         }
  28.         /* 解决办法：
  29.         /* 5最简单的解决办法 用到BFC块级格式化上下文*/
  30.         .container{
  31.             /* 可行1 */
  32.             overflow:auto;
  33.             /* 可行2 */
  34.             overflow:hidden;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="item">1</div>
  41.         <div class="item">2</div>
  42.         <div class="item">3</div>
  43.     </div>
  44. </body>
  45. </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:#666;
  20.         }
  21.         /* 页头页脚基本样式 */
  22.         .header, .floot{
  23.             height:40px;
  24.             background-color:lightblue;
  25.         }
  26.         /* 页头页脚内容区基本样式 */
  27.         .content{
  28.             width:960px;
  29.             margin:auto;
  30.         }
  31.         /* 页头里的li的样式 */
  32.         .content ul li{
  33.             float:left;
  34.             padding:0 15px;
  35.             /* line-height:行间距离，就是行高 */
  36.             line-height:40px;
  37.         }
  38.         .content ul li:hover{
  39.             background-color:coral;
  40.         }
  41.         /* 页脚 */
  42.         .content p{
  43.             /* text-align水平对齐方式 */
  44.             text-align:center;
  45.             line-height:40px;
  46.         }
  47.         /* 内容区用定位做 */
  48.         .container{
  49.             width:960px;
  50.             margin:10px auto;
  51.             /* 最小高度，以后写页面尽量用这样的方式去写，这样页面能撑开不会显得丑 */
  52.             min-height:600px;
  53.             /* 转为父级定位 */
  54.             position:relative;
  55.         }
  56.         .container>.left{
  57.             width:200px;
  58.             background-color:wheat;
  59.             min-height:600px;
  60.             position:absolute;
  61.             top:0;
  62.             left:0;
  63.         }   
  64.         .container > .main{
  65.             width:540px;
  66.             background-color:lightgreen;
  67.             min-height:600px;
  68.             position:absolute;
  69.             top:0;
  70.             left:210px;
  71.         }
  72.         .container>.right{
  73.             width:200px;
  74.             background-color:wheat;
  75.             min-height:600px;
  76.             position:absolute;
  77.             top:0;
  78.             right:0;
  79.         }
  80.     </style>
  81. </head>
  82. <body>
  83.     <!-- 页眉    -->
  84.     <div class="header">
  85.         <div class="content">
  86.             <ul>
  87.                 <li><a href="">首页</a></li>
  88.                 <li><a href="">618主会场</a></li>
  89.                 <li><a href="">联系客服</a></li>
  90.             </ul>
  91.         </div>
  92.     </div>
  93.     <!-- 主体 -->
  94.     <div class="container">
  95.         <div class="left">左侧</div>
  96.         <div class="main">内容</div>
  97.         <div class="right">右侧</div>
  98.     </div>
  99.     <!-- 页脚 -->
  100.     <div class="floot">
  101.         <div class="content">
  102.             <p>php中文网&copy;|备案号：苏ICP备*******</p> 
  103.         </div>
  104.     </div>
  105. </body>
  106. </html>

效果展示：

内容小结

  • 行内元素用于最终的载体，不能充当容器（当父级）。不能试着宽高，设置了也是无效的。
  • 任何元素浮动后自动转为块级元素
上一条：thinkphp.5.1 上传保存为中文文件问题下一条：信息表以及注册表
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多