search

博客列表 >浮动元素、定位，利用定位做布局

浮动元素、定位，利用定位做布局

天涯
天涯原创
2020年06月19日 10:47:12876浏览

浮动元素、定位，利用定位做布局

什么是浮动元素

浮动元素可以从文档流中脱离并释放原来占据的空间的元素

浮动元素的用途

可以在父容器中随意定位，使元素在定位时更加灵活，比如：垂直居中、层叠效果、多元素同行显示等

如何实现浮动元素

在css中用float属性来实现：float:left;/*左对齐浮动*/

浮动元素的特征

  • 当元素实现浮动后，会释放原来文档流中的空间
  • 在它之后的元素自动填充它的空间
  • 只对后面的元素产生影响，对前面元素没有影响
  • 任何元素，转为浮动元素的同时，也自动转为块级元素，具有块级元素的所有特征及属性
  • 浮动元素只能在水平方向浮动并受限于父级元素的内容区

代码演示：

  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: 3px solid #000;
  10.         padding: 50px;
  11.       }
  12.       .box {
  13.         width: 200px;
  14.         height: 200px;
  15.       }
  16.       .box1 {
  17.         background-color: lightblue;
  18.         /* 左浮动 */
  19.         float: left;
  20.       }
  21.       .box2 {
  22.         background-color: lightcoral;
  23.         width: 220px;
  24.         height: 220px;
  25.         /* 右浮动 */
  26.         float: right;
  27.       }
  28.       .box3 {
  29.         background-color: lightgreen;
  30.         width: 220px;
  31.         height: 220px;
  32.         /* 不想让它受到前面的浮动元素的影响 */
  33.         /* clear: left;
  34.         clear: right; */
  35.         clear: both;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="box box1">box1</div>
  41.     <div class="box box2">box2</div>
  42.     <div class="box box3">box3</div>
  43.     <!-- 浮动元素只能水平方向浮动
  44.     浮动元素的浮动边界仅限于内容区 -->
  45.   </body>
  46. </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: 3px dashed red;
  10.       }
  11.       .item {
  12.         width: 150px;
  13.         height: 150px;
  14.       }
  15.       .item:first-of-type {
  16.         background-color: lightgreen;
  17.       }
  18.       .item:nth-last-of-type(2) {
  19.         background-color: lightcoral;
  20.       }
  21.       .item:last-of-type {
  22.         background-color: lightblue;
  23.       }
  24.       .item {
  25.       /*变成浮动*/
  26.         float: left;
  27.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <!-- <div class="box"> -->
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.       <!-- <div class="clear"></div> -->
  38.     </div>
  39.     <!-- </div> -->
  40.   </body>
  41. </html>

塌陷效果图：

可怜的父元素

塌陷的解决方案

解决方案有很多，这里介绍比较常用的5种解决方案，比较推荐的是解决方案4和解决方案5。

  1. 给父元素也添加一个高度（问题是不会随着子元素同步高度，每次要根据子元素的高度来更改父元素高度，不但麻烦，也不实用）
  2. 把父元素也浮动起来（问题是会给整个文档带 来联动效应，造成其它元素布局混乱）
  3. 添加一个专用元素用于清浮动（问题是多了一个无用的实体元素，给选择器带麻烦，取数带来麻烦）
  4. 通过添加一个伪元素来解决（推荐使用，衍生问题较小）
  5. 最简单的解决方案,用到BFC(块级格式化上下文)（终级解决方案，代码少，效果好）

详细代码展示

  1.  /* 解决方案1: 给父元素也添加一个高度 */
  2.       /* .container { */
  3.       /* height: 150px; */
  4.       /* } */
  6.       /* 解决方案2: 把父元素也浮动起来 */
  7.       /* .container {
  8.         float: left;
  9.       }
  10.       .box {
  11.           float: left;
  12.       } */
  14.       /* 解决方案3: 添加一个专用元素用于清浮动 */
  15.       /* div.clear {
  16.         clear: both;
  17.       } */
  19.       /* 解决方案4： 通过添加一个伪元素来解决 */
  20.       /* .container::after {
  21.         content: "";
  22.         display: block;
  23.         clear: both;
  24.       } */
  26.       /* 解决方案5: 最简单的解决方案,用到BFC(块级格式化上下文) */
  27.       .container {
  28.         overflow: auto;
  29.       }

第5种解决方案效果图

效果图

利用定位做一个通用三列布局案例

body代码：

  1.   <body>
  2.     <!-- 页眉 -->
  3.     <div class="header">
  4.       <!-- 内容区: 水平居中 -->
  5.       <div class="content">
  6.         <ul>
  7.           <li><a href="">首页</a></li>
  8.           <li><a href="">主会场</a></li>
  9.           <li><a href="">在线客服</a></li>
  10.         </ul>
  11.       </div>
  12.     </div>
  14.     <!-- 主体 -->
  15.     <div class="container">
  16.       <div class="left">左侧</div>
  17.       <div class="main">内容区</div>
  18.       <div class="right">右侧</div>
  19.     </div>
  21.     <!-- 页脚 -->
  22.     <div class="footer">
  23.       <div class="content">
  24.         <p>*******有限公司&copy; | 备案号: 京ICP *********</p>
  25.       </div>
  26.     </div>
  27.   </body>

css代码：

  1.     <style>
  2.       /* 先将所有元素初始化，避免引起定位不到位的情况 */
  3.       * {
  4.         /* 外边距为0 */
  5.         margin: 0;
  6.         /* 内边距为0 */
  7.         padding: 0;
  8.         /* 使高度或宽度均包括到边框，这样设置高宽时更容易被理解，不用考虑边框有多宽或多高 */
  9.         box-sizing: border-box;
  10.       }
  11.       li {
  12.         /* 去掉列表小点 */
  13.         list-style: none;
  14.       }
  15.       a {
  16.         /* 去掉链接上的下划线 */
  17.         text-decoration: none;
  18.         color: #666;
  19.       }
  21.       /* 页眉与页脚 */
  22.       .header,
  23.       .footer {
  24.         height: 40px;
  25.         background-color: lightblue;
  26.       }
  27.       /* 页眉与页脚的内容区 */
  28.       .content {
  29.         width: 960px;
  30.         /* 居中处理 */
  31.         margin: auto;
  32.       }
  34.       .content ul li {
  35.         /* 将列表转为浮动元素，left表示靠左边 */
  36.         float: left;
  37.         line-height: 40px;
  38.         /* 设置外边距，0表示上下各为0，15px表示左右各为15像素 */
  39.         padding: 0 15px;
  40.       }
  41.       .content ul li:hover {
  42.         background-color: coral;
  43.       }
  44.       /* 页脚样式 */
  45.       .content p {
  46.         /* 文字居中 */
  47.         text-align: center;
  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: 200px;
  63.         background-color: wheat;
  64.         min-height: 600px;
  65.           /* 转为绝对定位，用来固定起始位置，top距顶端的距离，left距左端的距离 */
  66.         position: absolute;
  67.         top: 0;
  68.         left: 0;
  69.       }
  71.       .container > .right {
  72.         width: 200px;
  73.         background-color: wheat;
  74.         min-height: 600px;
  75.         position: absolute;
  76.         top: 0;
  77.         right: 0;
  78.       }
  80.       .container > .main {
  81.         background-color: lightgreen;
  82.         min-height: 600px;
  83.         width: 540px;
  85.         position: absolute;
  86.         top: 0;
  87.         left: 210px;
  88.       }
  89.     </style>

效果图：

通用布局效果图

上一条：用户自定义元素大小的计算方式（box-sizing)下一条：浮动元素高度塌陷产生的原因与解决方案以及经典三列布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多