search

博客列表 >简单演示浮动和高度塌陷的解决方案，用定位和浮动完成三列布局（0618）

简单演示浮动和高度塌陷的解决方案，用定位和浮动完成三列布局（0618）

丶久而旧之丶
丶久而旧之丶原创
2020年06月23日 00:43:10698浏览

浮动的简单演示

浮动前

浮动后

  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.       body {
  10.         border: 2px solid;
  11.       }
  12.       /* 设置盒子的宽高 */
  13.       .box {
  14.         width: 200px;
  15.         height: 200px;
  16.       }
  17.       /* 设置盒子背景色并左浮动 */
  18.       .box1 {
  19.         background-color: cadetblue;
  20.         float: left;
  21.       }
  22.       /* 设置盒子背景色并右浮动 */
  23.       .box2 {
  24.         background-color: chocolate;
  25.         float: right;
  26.       }
  27.       /* 设置盒子背景色并清除前面元素的浮动影响 */
  28.       .box3 {
  29.         background-color: rgb(23, 56, 206);
  30.         clear: both;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="box box1">box1</div>
  36.     <div class="box box2">box2</div>
  37.     <div class="box box3">box3</div>
  38.   </body>
  39. </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.       /* 设置边框线 */
  9.       .container {
  10.         border: 2px solid;
  11.       }
  12.       /* 设置盒子的大小 */
  13.       .item {
  14.         width: 200px;
  15.         height: 200px;
  16.       }
  17.       /* 设置第一个盒子的背景色 */
  18.       .item:first-of-type {
  19.         background-color: lightgreen;
  20.       }
  21.       /* 设置第二个盒子的背景色 */
  22.       .item:nth-of-type(2) {
  23.         background-color: lightpink;
  24.       }
  25.       /* 设置第三个盒子的背景色 */
  26.       .item:nth-of-type(3) {
  27.         background-color: lightyellow;
  28.       }
  29.       /* 设置盒子的浮动属性 */
  30.       .item {
  31.         float: left;
  32.       }
  33.       /* 浮动塌陷解决方案 */
  34.       /* 1.设置外层的高度（不能自适应，如果盒子调整高度，父级也需调整 ）*/
  35.       /* .container {
  36.         height: 200px;
  37.       } */
  38.       /* 2.使父级也浮动（如有多级，则需每个父级都需设置，因为浮动有连导效应 ）*/
  39.       /* .container {
  40.         float: left;
  41.       } */
  42.       /* 3.在子元素中加入一个盒子专门清除浮动（加入后可能会导致一些地方的渲染错误） */
  43.       /* .btn {
  44.         clear: both;
  45.       } */
  46.       /* 4.利用伪元素添加一个专门清除浮动的元素 */
  47.       /* .container::after {
  48.         content: "";
  49.         display: block;
  50.         clear: both;
  51.       } */
  52.       /* 5.最简单的解决方案，用到BFC（块级格式化上下文） */
  53.       .container {
  54.         overflow: hidden;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <div class="container">
  60.       <div class="item">1</div>
  61.       <div class="item">2</div>
  62.       <div class="item">3</div>
  63.       <!-- <div class="btn"></div> -->
  64.     </div>
  65.   </body>
  66. </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.       /* 样式初始化 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       /* 隐藏li前面的小黑点 */
  15.       li {
  16.         list-style: none;
  17.       }
  18.       /* 隐藏a标签的下划线，并设置字体 */
  19.       a {
  20.         text-decoration: none;
  21.         color: lightskyblue;
  22.       }
  23.       /* 设置鼠标悬停时的背景色 */
  24.       li:hover {
  25.         background-color: yellowgreen;
  26.       }
  27.       /* 设置页眉和页脚的宽度，背景色和行高 */
  28.       .header,
  29.       .footer {
  30.         background-color: navajowhite;
  31.         height: 40px;
  32.         line-height: 40px;
  33.         text-align: center;
  34.       }
  35.       /* 设置页眉，页脚的内容区的宽度并居中 */
  36.       .content {
  37.         width: 700px;
  38.         margin: auto;
  39.       }
  40.       /* 设置li进行左浮动排列，和左右外边距 */
  41.       ul > li {
  42.         float: left;
  43.         margin: 0 10px;
  44.       }
  45.       /* 设置页面内容区的宽高，，水平居中，定位父级 */
  46.       .container {
  47.         width: 1000px;
  48.         min-height: 700px;
  49.         margin: 10px auto;
  50.         position: relative;
  51.       }
  52.       /* 设置左边栏的宽高，背景色，用绝对定位使其定位在左边 */
  53.       .left {
  54.         min-height: 700px;
  55.         width: 200px;
  56.         background-color: lightyellow;
  57.         position: absolute;
  58.         left: 0;
  59.         top: 0;
  60.       }
  61.       /* 设置右边栏的宽高，背景色，用绝对定位使其定位在右边 */
  62.       .right {
  63.         min-height: 700px;
  64.         width: 200px;
  65.         background-color: lightyellow;
  66.         position: absolute;
  67.         right: 0;
  68.         top: 0;
  69.       }
  70.       /* 设置内容区的宽高，背景色，用绝对定位使其定位在中间 */
  71.       .main {
  72.         background-color: lightgreen;
  73.         min-height: 700px;
  74.         width: 580px;
  75.         position: absolute;
  76.         left: 210px;
  77.         top: 0;
  78.       }
  79.     </style>
  80.   </head>
  81.   <body>
  82.     <!-- 页眉 -->
  83.     <div class="header">
  84.       <!-- 页眉的内容区 -->
  85.       <div class="content">
  86.         <ul>
  87.           <li><a href="">首页</a></li>
  88.           <li><a href="">视频教程</a></li>
  89.           <li><a href="">入门教程</a></li>
  90.         </ul>
  91.       </div>
  92.     </div>
  93.     <!-- 页面的内容区 -->
  94.     <div class="container">
  95.       <div class="left">左边栏</div>
  96.       <div class="main">内容区</div>
  97.       <div class="right">右边栏</div>
  98.     </div>
  99.     <!-- 页脚 -->
  100.     <div class="footer">
  101.       <!-- 页脚的内容区 -->
  102.       <div class="content">
  103.         <p>合肥彼岸互联信息技术有限公司© 皖公网安备 34010402701654号</p>
  104.       </div>
  105.     </div>
  106.   </body>
  107. </html>

使用浮动方式(css中内容区代码进行更改)

  1.  .container {
  2.         /* background-color: lightskyblue; */
  3.         width: 1000px;
  4.         min-height: 700px;
  5.         margin: 10px auto;
  6.         overflow: hidden;
  7.       }
  8.       /* 设置左边栏的宽高，背景色，用左浮动使其定位在左边 */
  9.       .left {
  10.         min-height: 700px;
  11.         width: 200px;
  12.         background-color: lightyellow;
  13.         float: left;
  14.       }
  15.       /* 设置右边栏的宽高，背景色，用右浮动使其定位在右边 */
  16.       .right {
  17.         min-height: 700px;
  18.         width: 200px;
  19.         background-color: lightyellow;
  20.         float: right;
  21.       }
  22.       /* 设置内容区的宽高，背景色，用左浮动使其定位在中间 */
  23.       .main {
  24.         background-color: lightgreen;
  25.         min-height: 700px;
  26.         width: 580px;
  27.         float: left;
  28.         margin-left: 10px;
  29.       }

总结

1.对于定位加深了理解
2.知道了浮动后会产生什么后果，并知晓应该如何解决
3.圣杯布局和grid布局多进行手动练习和理解

上一条：基于浮动、绝对定位布局，内容的多列显示，flex容器属性实战：导航条等练习下一条：内容多栏/列显示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多