Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 浮动元素、定位，利用定位做布局
Blogger Information
Blog 10
fans 0
comment 0
visits 8686
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
浮动元素、定位，利用定位做布局
天涯
Original
877 people have browsed it

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

什么是浮动元素

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

浮动元素的用途

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

如何实现浮动元素

在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>

效果图：

通用布局效果图

Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：写的很不错，继续加油！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post