search

博客列表 >浮动元素高度塌陷原因以及解决方案

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

我说孟
我说孟原创
2020年06月26日 22:41:49708浏览

浮动

" class="reference-link">

  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.       body {
  9.         border: 5px solid #000;
  10.         padding: 20px;
  11.       }
  12.       .box {
  13.         width: 200px;
  14.         height: 200px;
  15.         background: rgb(189, 20, 20);
  16.       }
  17.       .box1 {
  18.         width: 200px;
  19.         height: 200px;
  20.         background: rgb(61, 153, 25);
  21.         float: left;
  22.       }
  23.       .box2 {
  24.         width: 220px;
  25.         height: 220px;
  26.         background: rgb(82, 42, 175);
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="box"></div>
  32.     <div class="box1"></div>
  33.     <div class="box2"></div>
  34.   </body>
  35. </html>`
  36. --------

浮动的知识点：

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

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

解决方案1：给父元素添加一个高度，但是此方法无法自适应.
解决方案2:把父元素浮动起来 ,会产生传导效应，级数越多很麻烦.
解决方案3: 添加一个专用元素用于清浮动,不建议
解决方案4： 添加一个伪元素来解决，也可以
解决方案5: 最简单的解决方案,加overflow属性（hidden/auto）：
.container{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.         /* 盒子改变下到边框级 */
  13.         box-sizing: border-box;
  14.       }
  15.       li {
  16.         /* li有样式,把前面的小黑点去掉 */
  17.         list-style: none;
  18.       }
  19.       a {
  20.         /* A标签的下划线去掉 */
  21.         text-decoration: none;
  22.         color: #666;
  23.       }
  24.       /* 页眉与页脚 */
  25.       .header,
  26.       .footer {
  27.         height: 40px;
  28.         background-color: darkcyan;
  29.       }
  30.       .content {
  31.         width: 960px;
  32.         margin: auto;
  33.       }
  34.       .content ul li {
  35.         float: left;
  36.         line-height: 40px;
  37.         padding: 0 15px;
  38.       }
  39.       /* 鼠标悬停样式:背景色 */
  40.       .content ul li:hover {
  41.         background-color: rgb(231, 180, 13);
  42.       }
  43.       /* 页脚 */
  44.       .content p {
  45.         text-align: center;
  46.         line-height: 40px;
  47.       }
  48.       /* 主体用定位来做 */
  49.       .container {
  50.         width: 960px;
  51.         margin: px auto;
  52.         min-height: 600px;
  53.         /* 阻止浮动元素塌陷 */
  54.         overflow: hidden;
  55.       }
  56.       .container > .left {
  57.         width: 200px;
  58.         background-color: rgb(141, 112, 15);
  59.         min-height: 600px;
  60.         float: left;
  61.       }
  62.       .container > .right {
  63.         width: 200px;
  64.         background-color: rgb(146, 211, 255);
  65.         min-height: 600px;
  66.         float: right;
  67.       }
  68.       .container > .main {
  69.         background: rgb(122, 58, 131);
  70.         min-height: 600px;
  71.         width: 540px;
  72.         float: left;
  73.         margin-left: 10px;
  74.       }
  75.     </style>
  76.   </head>
  77.   <body>
  78.     <!-- 页眉 -->
  79.     <div class="header">
  80.       <div class="content">
  81.         <ul>
  82.           <li><a href="">首页</a></li>
  83.           <li><a href="">会场</a></li>
  84.           <li><a href="">售后</a></li>
  85.         </ul>
  86.       </div>
  87.     </div>
  88.     <!-- 主体 -->
  89.     <div class="container">
  90.       <div class="left">左侧</div>
  91.       <div class="main">内容</div>
  92.       <div class="right">右侧</div>
  93.     </div>
  94.     <!-- 页脚 -->
  95.     <div class="footer">
  96.       <div class="content">
  97.         <p>某某科技有限公司</p>
  98.       </div>
  99.     </div>
  100.   </body>
  101. </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.       .container {
  9.         border: 5px dashed;
  10.         /* 把所有的元素包起来 */
  11.         overflow: hidden;
  12.       }
  13.       .container > * {
  14.         min-height: 400px;
  15.       }
  16.       /* 左右两侧固定 */
  17.       .container > .left,
  18.       .container > .right {
  19.         width: 200px;
  20.         background-color: rgb(236, 178, 53);
  21.       }
  22.       /* 中间样式 */
  23.       .container > .main {
  24.         width: 100%;
  25.         background-color: rgb(72, 176, 218);
  26.       }
  27.       .container > * {
  28.         float: left;
  29.       }
  30.       /* 使用内边距将左右两边的位置挤出来 */
  31.       .container {
  32.         padding-left: 200px;
  33.         padding-right: 200px;
  34.       }
  35.       .container > .left {
  36.         margin-left: -100%;
  37.         /* 使用相对定位将他复位 */
  38.         position: relative;
  39.         top: 0;
  40.         right: 200px;
  41.       }
  42.       .container > .right {
  43.         margin-left: -200px;
  44.         position: relative;
  45.         top: 0;
  46.         left: 200px;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div class="container">
  52.       <!-- 圣杯布局要求主体内容优先渲染 -->
  53.       <div class="main">内容区</div>
  54.       <div class="left">左侧</div>
  55.       <div class="right">右侧</div>
  56.     </div>
  57.   </body>
  58. </html>
上一条：盒模型常用属性、元素的重新计算及元素的垂直对齐技术（前端第六课）下一条：Chapter5 表格与表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多