search

博客列表 >浮动元素高度坍塌产生的原因与解决方案

浮动元素高度坍塌产生的原因与解决方案

多喝水
多喝水原创
2020年06月22日 17:47:29676浏览

一、浮动的基本特征

  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. </head>
  8. <style>
  9.     .box{
  10.         width: 200px;
  11.         height: 200px;
  12.     }
  13.     .box1{
  14.         background-color: lightblue;
  15.     }
  16.     .box2{
  17.         background-color: lightcoral;
  18.         float: left;
  19.     }
  20.     .box3{
  21.         background-color: lightgreen;
  22.         width: 230px;
  23.         height: 230px;
  24.     }
  25.     a,span{
  26.         background-color: yellow;
  27.         width: 200px;
  28.         height: 50px;
  29.         float: left;
  30.     }
  31. </style>
  32. <body>
  33.     <div class="box box1">box1</div>
  34.     <div class="box box2">box2</div>
  35.     <div class="box box3">box3</div>
  36. <hr/>
  37. <a href="">php.cn</a>
  38. <span>PHP中文网欢迎</span>
  40.     </body>
  41. </body>
  42. </html>

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

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

浮动塌陷和解决方法：

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

三、经典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.     /* 初始化 */
  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,
  23.     .footer {
  24.       height: 40px;
  25.       background-color: lightsteelblue;
  26.     }
  27.     .content {
  28.       width: 960px;
  29.       margin: auto;
  31.     }
  32.     .content ul li {
  33.       float: left;
  34.       line-height: 40px;
  35.       padding: 0 15px;
  36.     }
  37.     .content ul li:hover {
  38.       background-color: lightcoral;
  39.     }
  40.     /* 页脚 */
  41.     .content p {
  42.       text-align: center;
  43.       line-height: 40px;
  44.     }
  45.     /* 主体用定位来做 */
  46.     .container {
  47.       width: 960px;
  48.       margin: 10px auto;
  50.       min-height: 600px;
  51.       /* 定位做的，转为定位元素，父级 */
  52.       position: relative;
  53.     }
  54.     .container > .left {
  55.       width: 200px;
  56.       background-color: navajowhite;
  57.       min-height: 600px;
  58.       position: absolute;
  59.       top: 0;
  60.       left: 0;
  61.     }
  62.     .container > .right {
  63.       width: 200px;
  64.       background-color: navajowhite;
  65.       min-height: 600px;
  66.       position: absolute;
  67.       top: 0;
  68.       right: 0;
  69.     }
  70.     .container > .main {
  71.       background-color: lightgreen;
  72.       min-height: 600px;
  73.       width: 540px;
  74.       position: absolute;
  75.       top: 0;
  76.       left: 210px;
  77.     }
  78.   </style>
  79. </head>
  80. <body>
  81.   <!-- 页眉 -->
  82.   <div class="header">
  83.     <div class="content">
  84.       <ul>
  85.         <li><a href="">首页</a></li>
  86.         <li><a href="">会场</a></li>
  87.         <li><a href="">售后</a></li>
  88.       </ul>
  89.     </div>
  90.   </div>
  91.   <!-- 主体 -->
  92.   <div class="container">
  93.     <div class="left">左边</div>
  94.     <div class="main">中间</div>
  95.     <div class="right">右边</div>
  96.   </div>
  97.   <!-- 页脚 -->
  98.   <div class="footer">
  99.     <div class="content">
  100.       <p>教育科技有限公司&copy; | 闵备案号：*******</p>
  101.     </div>
  102.   </div>
  103. </body>
  104. </html>

2.使用浮动完成一个三列经典布局，防止浮动元素塌陷用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.       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,
  23.     .footer {
  24.       height: 40px;
  25.       background-color: lightsteelblue;
  26.     }
  27.     .content {
  28.       width: 960px;
  29.       margin: auto;
  31.     }
  32.     .content ul li {
  33.       float: left;
  34.       line-height: 40px;
  35.       padding: 0 15px;
  36.     }
  37.     .content ul li:hover {
  38.       background-color: limegreen;
  39.     }
  40.     /* 页脚 */
  41.     .content p {
  42.       text-align: center;
  43.       line-height: 40px;
  44.     }
  45.     /* 主体用定位来做 */
  46.     .container {
  47.       width: 960px;
  48.       margin: 10px auto;
  50.       min-height: 600px;
  51.       /* 防止浮动元素塌陷 */
  52.       overflow: hidden;
  53.     }
  54.     .container > .left {
  55.       width: 200px;
  56.       background-color: navajowhite;
  57.       min-height: 600px;
  58.       float: left;
  59.     }
  60.     .container > .right {
  61.       width: 200px;
  62.       background-color: navajowhite;
  63.       min-height: 600px;
  64.       float: right;
  65.     }
  66.     .container > .main {
  67.       background-color: plum;
  68.       min-height: 600px;
  69.       width: 540px;
  70.       float: left;
  71.       margin-left: 10px;
  72.     }
  73.   </style>
  74. </head>
  75. <body>
  76.   <!-- 页眉 -->
  77.   <div class="header">
  78.     <div class="content">
  79.       <ul>
  80.         <li><a href="">首页</a></li>
  81.         <li><a href="">会场</a></li>
  82.         <li><a href="">售后</a></li>
  83.       </ul>
  84.     </div>
  85.   </div>
  86.   <!-- 主体 -->
  87.   <div class="container">
  88.     <div class="left">左</div>
  89.     <div class="main">中</div>
  90.     <div class="right">右</div>
  91.   </div>
  92.   <!-- 页脚 -->
  93.   <div class="footer">
  94.     <div class="content">
  95.       <p>教育科技有限公司&copy; | 闵备案号：*******</p>
  96.     </div>
  97.   </div>
  98. </body>
  99. </html>

总结

通过学习，对浮动产生的影响有了更深的理解，新的知识点overflow: hidden，掌握定位的使用

上一条：背景定位技术和阿里图标使用技巧下一条：简述CSS选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多