search

博客列表 >浮动元素高度坍塌原因及解决方案与三列布局

浮动元素高度坍塌原因及解决方案与三列布局

Haggi的糖果屋
Haggi的糖果屋原创
2020年06月21日 17:56:41747浏览

一浮动

浮动基本特征

1.元素浮动之后从文档流中脱离出来(会释放它原来在文档流中占据的空间)
2.后面的元素会自动填充它出让出来的空间大小
3.浮动元素只会影响到它后面的元素布局，对前面没有影响
4.行内元素用于最终内容的载体, 不能充当容器/当父级，不能设置或设置了宽高也是无效的。例如a、p元素等
5.任何元素，一旦浮动都自动转为块级元素

高度坍塌及解决方案

高度坍塌：
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，从而导致父元素的高度塌陷
运行图：

解决方案：
1.给父元素也添加一个高度

CSS代码：

  1. .container {
  2.         height: 150px;
  3.       }

运行结果图：

2.把父元素也浮动起来
CSS代码：

  1.  .container {
  2.         float: left;
  3.       }

运行结果图：

3.添加一个专用元素用于清浮动
CSS代码：

  1. .clear {
  2.         width: 100px;
  3.         height: 100px;
  4.         background-color: brown;
  5.         clear: both;

运行结果图：

4.通过添加一个伪元素来解决
CSS代码：

  1. .container::after {
  2.         content: "伪元素";
  3.         display: block;
  4.         clear: both;

运行结果图：

5.块级格式化上下文
CSS代码：

  1. .container {
  2.         overflow: scroll;
  3.         /* 默认值：overflow: auto; */
  4.       }

运行结果图：

二、三列布局

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.         /* 固定块级元素宽高，避免边框、内边距增长而增长 */
  13.         box-sizing: border-box;
  14.       }
  15.       li {
  16.         list-style: none;
  17.       }
  18.       a {
  19.         text-decoration: none;
  20.         color: whitesmoke;
  21.       }
  23.       /* 页眉与页脚 */
  24.       .header,
  25.       .footer {
  26.         height: 40px;
  27.         width: 100%;
  28.         background-color: black;
  29.         color: whitesmoke;
  30.         margin: auto;
  31.       }
  32.       /* 页眉与页脚的内容区 */
  33.       .content {
  34.         width: 100%;
  35.       }
  37.       .content ul li {
  38.         float: left;
  39.         line-height: 40px;
  40.         padding: 0 15px;
  41.       }
  42.       .content ul li:hover {
  43.         background-color: coral;
  44.       }
  45.       /* 页脚样式 */
  46.       .content p {
  47.         text-align: right;
  48.         line-height: 40px;
  49.       }
  51.       /* 主体用定位 */
  52.       .container {
  53.         width: 960px;
  54.         margin: 10px auto;
  55.         /* background-color: #ccc; */
  56.         min-height: 600px;
  57.         /* 转为定位元素，做为定位父级 */
  58.         position: relative;
  59.       }
  61.       .container > .left {
  62.         width: 20%;
  63.         background-color: gray;
  64.         min-height: 600px;
  66.         position: absolute;
  67.         top: 0;
  68.         left: 0;
  69.       }
  71.       .container > .right {
  72.         width: 20%;
  73.         background-color: red;
  74.         min-height: 600px;
  75.         position: absolute;
  76.         top: 0;
  77.         right: 0;
  78.       }
  80.       .container > .main {
  81.         background-color: limegreen;
  82.         min-height: 600px;
  83.         width: 58%;
  85.         position: absolute;
  86.         top: 0;
  87.         left: 21%;
  88.       }
  89.     </style>
  90.   </head>
  91.   <body>
  92.     <!-- 页眉 -->
  93.     <div class="header">
  94.       <!-- 内容区: 水平居中 -->
  95.       <div class="content">
  96.         <ul>
  97.           <li><a href="">导航栏</a></li>
  98.           <li><a href="">模块一</a></li>
  99.           <li><a href="">模块二</a></li>
  100.           <li><a href="">模块三</a></li>
  101.           <li><a href="">模块四</a></li>
  102.           <li><a href="">模块五</a></li>
  103.         </ul>
  104.       </div>
  105.     </div>
  107.     <!-- 主体 -->
  108.     <div class="container">
  109.       <div class="left">左侧边栏</div>
  110.       <div class="main">内容区</div>
  111.       <div class="right">右侧边栏</div>
  112.     </div>
  114.     <!-- 页脚 -->
  115.     <div class="footer">
  116.       <div class="content">
  117.         <p>底部：欢迎来到PHP世界</p>
  118.       </div>
  119.     </div>
  120.   </body>
  121. </html>

结果图:

2.浮动

部分css代码：

  2.       .container {
  3.         width: 100%;
  4.         margin: 10px auto;
  5.         /* background-color: #ccc; */
  6.         min-height: 600px;
  7.         /* 防止浮动元素的高度塌陷 */
  8.         overflow: auto;
  9.       }
  11.       .container > .left {
  12.         width: 20%;
  13.         background-color: wheat;
  14.         min-height: 600px;
  15.         float: left;
  16.       }
  18.       .container > .right {
  19.         width: 20%;
  20.         background-color: wheat;
  21.         min-height: 600px;
  22.         float: right;
  23.       }
  25.       .container > .main {
  26.         background-color: lightgreen;
  27.         min-height: 600px;
  28.         width: 58%;
  29.         float: left;
  30.         margin-left: 1%;
  31.       }

结果图

上一条：购物车的表格和注册表单的演示（0616）下一条：laravel--通用后台管理系统--添加菜单--角色添加权限--根据用户权限显示菜单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多