search

博客列表 >浮动元素高度塌陷原因和解决方案及定位和浮动技术完成三列布局

浮动元素高度塌陷原因和解决方案及定位和浮动技术完成三列布局

知行合一
知行合一原创
2020年06月27日 15:46:501008浏览

浮动元素高度塌陷原因

我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;如果父元素有一个边框，那么浮动元素无法将边框撑开。 如下图所示：


原因是因为元素浮动后，就脱离了文档流。那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容。

浮动元素高度塌陷解决方法

1.给父元素设置高度

height：50px;

2.父元素设置浮动

.container{clear:both}

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

.clear{clear:both}

4.添加一个伪元素解决

  1. .clearfix::after{
  2.             content:"";
  3.             display:block;
  4.             clear:both;    
  5.               }

5.最简单的解决方案。 块级格式化上下文。BFC

  1. .container {
  2.             overflow: hidden;
  3.         /*或 overflow: auto;*/
  5.         }

定位实现三列布局

  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.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }    
  13.         li {
  14.             list-style: none;
  15.         }    
  16.         .header,
  17.         .footer {
  18.             height: 40px;
  19.             background-color: lightblue;
  20.         }    
  21.         .content {
  22.             width: 1200px;
  23.             margin: 0 auto;    
  24.             line-height: 40px;
  25.         }    
  26.         .content p {
  27.             text-align: center;
  28.         }    
  29.         .content ul li {
  30.             float: left;
  31.             line-height: 40px;
  32.             padding: 0 20px;
  33.             ;
  34.         }    
  35.         .content ul li:hover {
  36.             background-color: lightseagreen;
  37.         }    
  38.         /*主体用绝对定位来做*/
  39.         .container {
  40.             width: 1200px;
  41.             margin: 10px auto;
  42.             background-color: mediumseagreen;
  43.             min-height: 600px;
  44.             position: relative;
  45.         }    
  46.         .container>.left {
  47.             width: 200px;
  48.             min-height: 600px;
  49.             background-color: mediumslateblue;
  50.             position: absolute;
  51.             top: 0;
  52.             left: 0;
  53.         }    
  54.         .container>.right {
  55.             width: 200px;
  56.             min-height: 600px;
  57.             background-color: mediumslateblue;
  58.             position: absolute;
  59.             top: 0;
  60.             right: 0;
  61.         }    
  62.         .container>.main {
  63.             background-color: orangered;
  64.             min-height: 600px;
  65.             width: 800px;
  66.             position: absolute;
  67.             top: 0;
  68.             left: 200px;
  69.         }
  70.     </style>
  71. </head>    
  72. <body>
  73.     <div class="header">
  74.         <div class="content">
  75.             <ul>
  76.                 <li><a>首页</a></li>
  77.                 <li><a>公司简介</a></li>
  78.                 <li><a>联系我们</a></li>
  79.             </ul>
  80.         </div>
  81.     </div>
  82.     <div class="container">
  83.         <div class="left">左侧</div>
  84.         <div class="main">中间</div>
  85.         <div class="right">右侧</div>
  86.     </div>
  87.     <div class="footer">
  88.         <div class="content">
  89.             <p>xxx版权所有</p>
  90.             </p>
  91.         </div>
  92.     </div>
  93. </body>    
  94. </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.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         li {
  16.             list-style: none;
  17.         }
  19.         .header,
  20.         .footer {
  21.             height: 40px;
  22.             background-color: lightblue;
  23.         }
  25.         .content {
  26.             width: 1000px;
  27.             margin: 0 auto;
  29.             line-height: 40px;
  30.         }
  32.         .content p {
  33.             text-align: center;
  34.         }
  36.         .content ul li {
  37.             float: left;
  38.             line-height: 40px;
  39.             padding: 0 20px;
  40.             ;
  41.         }
  43.         .content ul li:hover {
  44.             background-color: lightseagreen;
  45.         }
  47.         /*主体用绝对定位来做*/
  48.         .container {
  49.             width: 1000px;
  50.             margin: 10px auto;
  51.             background-color: mediumseagreen;
  52.             min-height: 600px;
  54.             overflow: hidden;
  55.         }
  57.         .container>.left {
  58.             width: 200px;
  59.             min-height: 600px;
  60.             background-color: mediumslateblue;
  61.             float: left;
  63.         }
  65.         .container>.right {
  66.             width: 200px;
  67.             min-height: 600px;
  68.             background-color: mediumslateblue;
  69.             float: right;
  70.         }
  72.         .container>.main {
  73.             background-color: orangered;
  74.             min-height: 600px;
  75.             width: 560px;
  76.             margin-left: 20px;
  77.             margin-right: 20px;
  78.             float: left;
  80.         }
  81.     </style>
  82. </head>
  84. <body>
  85.     <div class="header">
  86.         <div class="content">
  87.             <ul>
  88.                 <li><a>首页</a></li>
  89.                 <li><a>公司简介</a></li>
  90.                 <li><a>联系我们</a></li>
  91.             </ul>
  92.         </div>
  93.     </div>
  94.     <div class="container">
  95.         <div class="left">左侧</div>
  96.         <div class="main">中间</div>
  97.         <div class="right">右侧</div>
  98.     </div>
  99.     <div class="footer">
  100.         <div class="content">
  101.             <p>xxx版权所有</p>
  102.             </p>
  103.         </div>
  104.     </div>
  105. </body>    
  106. </html>

总结

  • 解决浮动元素高度塌陷，用第5种方法，更方便。
  • 三列布局的实现方法有很多，定位和浮动是基础的，还有Flex布局，网格布局等。以后掌握了再纪录！
上一条：浮动元素高度塌陷产生的原因与解决方案下一条：熟悉盒模型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多