search

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

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

小追
小追原创
2020年06月21日 16:31:591170浏览

浮动元素引起的高度坍塌与解决方案

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

元素浮动的3个定义

1.元素浮动后从文档流中脱离出来（意思是它会释放出它原来占据的空间）；

2元素浮动后，它后面元素会自动填充到它原来的位置；

3浮动元素只会影响到它后面的元素布局，对前面没有影响。

所以当子元素浮动后，父级里变空，就会产生高度上的缺失塌陷。

解决方案：

1.给父元素添加高度：

  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.         1给.container一个高度，这是很不好的，不要这么用 
  30.         .container{
  31.              height:150px;
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="container">
  36.         <div class="item">1</div>
  37.         <div class="item">2</div>
  38.         <div class="item">3</div>
  39.     </div>
  40. </body>
  41. </html>

这样做其实父元素内部是空的，不建议这么做；

2.给父级也添加浮动：

  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.         /* 2给父级也进行浮动，如果这个父级还有好多个父级会产生传导效应，就很不好了 */
  29.         .container{
  30.             float:left;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="main">    
  36.         <div class="container">
  37.         <div class="item">1</div>
  38.         <div class="item">2</div>
  39.         <div class="item">3</div>
  40.         </div>
  41.     </div>
  43. </body>
  44. </html>

结果：

会发现如果这个父元素还有它的父元素，那么它的父元素高度将会崩塌，如果有很多个父元素就更麻烦了，所以这也是不好的；

3.添加一个专用元素用来清浮动：

  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.         3添加一个专用元素用来清浮动，这样对后面渲染也不好 */
  30.         .clear{
  31.             clear:both;
  32.         } 
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="container">
  37.         <div class="item">1</div>
  38.         <div class="item">2</div>
  39.         <div class="item">3</div>
  40.         <div class="clear"></div> 
  42.     </div>
  43. </body>
  44. </html>

结果：

可以看到代码乱掉了，要修正需要添加不少代码，对后期渲染很不友好；

4.添加一个伪元素来解决：

  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.         /* 4添加一个伪元素来解决 */
  30.         .container::after{
  31.             content:"";
  32.             display:block;
  33.             clear:both;
  34.         }
  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是差不多的；

5.使用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>

结果
可以看到这是最简单的方法。

绝对定位实现经典3列布局

  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.         }
  81.     </style>
  82. </head>
  83. <body>
  84.     <!-- 页眉    -->
  85.     <div class="header">
  86.         <div class="content">
  87.             <ul>
  88.                 <li><a href="">首页</a></li>
  89.                 <li><a href="">618主会场</a></li>
  90.                 <li><a href="">联系客服</a></li>
  91.             </ul>
  92.         </div>
  93.     </div>
  94.     <!-- 主体 -->
  95.     <div class="container">
  96.         <div class="left">左侧</div>
  97.         <div class="main">内容</div>
  98.         <div class="right">右侧</div>
  99.     </div>
  100.     <!-- 页脚 -->
  101.     <div class="floot">
  102.         <div class="content">
  103.             <p>php中文网&copy;|备案号：苏ICP备*******</p> 
  104.         </div>
  105.     </div>
  106. </body>
  107. </html>

效果图：

上一条：运用CSS定位和JS事件来编写实用二级下拉菜单下一条：laravel--通用后台管理系统--分页--图片上传
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多