简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >了解浮动和其网页布局

了解浮动和其网页布局

Blueprint
Blueprint原创
2020年06月19日 10:54:44649浏览

了解浮动

什么是浮动

CSS 的 Float（浮动）是一种使元素脱离文档流的方法，会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

浮动的表现

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  1. <body>
  2.   <style>
  3.     /* 设置外面盒子的大小 */
  4.     .box {
  5.       width: 100%;
  6.       height: 400px;
  7.       border: 2px dashed red;
  8.     }
  9.     /* 设置小盒子的共同样式 */
  10.     .item {
  11.       width: 200px;
  12.       height: 200px;
  13.       border: 1px solid black;
  14.     }
  15.     /* 每个item的背景 */
  16.     .box > :first-child {
  17.       background-color: #00ff00;
  18.     }
  19.     .box > :last-child {
  20.       background-color: #ff0000;
  21.     }
  22.     .box > :nth-child(2) {
  23.       background-color: #0000ff;
  24.     }
  25.   </style>
  26.   <div class="box">
  27.     <div class="item">box1</div>
  28.     <div class="item">box2</div>
  29.     <div class="item">box3</div>
  30.   </div>
  31. </body>

  1. <body>
  2.   <style>
  3.     /* 设置外面盒子的大小 */
  4.     .box {
  5.       width: 100%;
  6.       height: 400px;
  7.       border: 2px dashed red;
  8.     }
  9.     /* 设置小盒子的共同样式 */
  10.     .item {
  11.       width: 200px;
  12.       height: 200px;
  13.       border: 1px solid black;
  14.     }
  15.     /* 每个item的背景 */
  16.     .box > :first-child {
  17.       background-color: #00ff00;
  18.     }
  19.     .box > :last-child {
  20.       background-color: #ff0000;
  21.     }
  22.     .box > :nth-child(2) {
  23.       background-color: #0000ff;
  24.     }
  25.     /*  向左浮动 */
  26.     .item {
  27.       float: left;
  28.     }
  29.   </style>

  1. <style>
  2.   /* 设置外面盒子的大小 */
  3.   .box {
  4.     width: 100%;
  5.     height: 400px;
  6.     border: 2px dashed red;
  7.   }
  8.   /* 设置小盒子的共同样式 */
  9.   .item {
  10.     width: 200px;
  11.     height: 200px;
  12.     border: 1px solid black;
  13.   }
  14.   /* 每个item的背景 */
  15.   .box > :first-child {
  16.     background-color: #00ff00;
  17.   }
  18.   .box > :last-child {
  19.     background-color: #ff0000;
  20.   }
  21.   .box > :nth-child(2) {
  22.     background-color: #0000ff;
  23.   }
  24.   /* 向右浮动 */
  25.   .item {
  26.     float: right;
  27.   }
  28. </style>

如果父级元素的宽度无法容纳水平排列的三个浮动块，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

浮动对布局的影响

浮动的元素会脱离文档流，正是因为这种特性，导致本属于普通流中的元素浮动之后，包含框中由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）

  1. <body>
  2.   <style>
  3.     /* 设置外面盒子的大小 */
  4.     .box {
  5.       width: 500px;
  6.       border: 2px dashed red;
  7.     }
  8.     /* 设置小盒子的共同样式 */
  9.     .item {
  10.       height: 200px;
  11.       width: 200px;
  12.       border: 1px solid black;
  13.       /* 设置浮动 */
  14.       float: left;
  15.     }
  16.     /* 每个item的背景 */
  17.     .box > :first-child {
  18.       background-color: #00ff00;
  19.     }
  20.     .box > :last-child {
  21.       background-color: #ff0000;
  22.     }
  23.     .box > :nth-child(2) {
  24.       background-color: #0000ff;
  25.     }
  26.     /* 向右浮动 */
  27.   </style>
  28.   <div class="box">
  29.     <div class="item">box1</div>
  30.     <div class="item">box2</div>
  31.     <div class="item">box3</div>
  32.   </div>
  33. </body>

清除浮动

在实际布局中，往往这并不是我们所希望的，所以需要清除浮动，使其包含框表现出正常的高度。

使用空标签清除浮动
  1. <div>  
  2.   <div style="float:left;">item</div>  
  3.   <div style="float:left;">item</div>  
  4.   <div style="clear:both;"></div>  
  5. </div>

优点：通俗易懂，容易掌握

缺点：增加了空标签，改变了DOM结构，对js的DOM操作有影响

父级元素浮动
  1. <body>
  2.   <style>
  3.     body > div {
  4.       width: 400px;
  5.       border: 1px dashed red;
  7.       /*父级添加浮动*/
  8.       float: left;
  9.     }
  10.     div > div {
  11.       width: 50px;
  12.       height: 50px;
  13.       background-color: green;
  14.       border: 1px solid black;
  15.     }
  16.   </style>
  17.   <div>
  18.     <div style="float: left;"></div>
  19.     <div style="float: left;"></div>
  20.     <div style="float: left;"></div>
  21.   </div>
  22. </body>

优点：不存在结构和语义化问题，代码量极少。

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body。

::after伪元素
  1. <body>
  2.   <style>
  3.     body > div {
  4.       width: 400px;
  5.       border: 1px dashed red;
  6.     }
  7.     div > div {
  8.       width: 50px;
  9.       height: 50px;
  10.       background-color: green;
  11.       border: 1px solid black;
  12.     }
  14.     /*使用::after伪元素*/
  15.     body > div:after {
  16.       content: "";
  17.       display: block;
  18.       clear: both;
  19.     }
  20.   </style>
  21.   <div>
  22.     <div style="float: left;"></div>
  23.     <div style="float: left;"></div>
  24.     <div class="clear" style="float: left;"></div>
  25.   </div>
  26. </body>

优点：结构和语义化完全正确，代码量居中。
缺点：复用方式不当会造成代码量增加。

父级元素定义overflow:hidden(建议使用)
  1. <body>
  2.   <style>
  3.     body > div {
  4.       width: 400px;
  5.       border: 1px dashed red;
  6.       /* 使用overflow 属性*/
  7.       overflow: hidden;
  8.     }
  9.     div > div {
  10.       width: 50px;
  11.       height: 50px;
  12.       background-color: green;
  13.       border: 1px solid black;
  14.     }
  15.   </style>
  16.   <div>
  17.     <div style="float: left;"></div>
  18.     <div style="float: left;"></div>
  19.     <div style="float: left;"></div>
  20.   </div>
  21. </body>

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

浮动和定位实现的三列布局

浮动：
  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>Document</title>
  8.     <style>
  9.       /* 初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  16.       /* 页眉页脚 */
  17.       header,
  18.       footer {
  19.         height: 80px;
  20.         background-color: lightblue;
  21.       }
  23.       /* 主体 */
  24.       main {
  25.         width: 960px;
  26.         min-height: 600px;
  27.         height: 700px;
  28.         margin: auto;
  29.         background-color: #cccccc;
  31.         /* 清除浮动 */
  32.         clear: both;
  33.       }
  34.       /* 左侧 */
  35.       .left {
  36.         width: 200px;
  37.         min-height: 600px;
  38.         height: 100%;
  39.         background-color: blue;
  41.         /* 浮动 */
  42.         float: left;
  43.       }
  45.       /* 右侧 */
  46.       .right {
  47.         width: 200px;
  48.         min-height: 600px;
  49.         height: 100%;
  50.         background-color: blue;
  51.         /* 浮动 */
  52.         float: right;
  53.       }
  55.       /* 内容 */
  56.       article {
  57.         min-height: 600px;
  58.         height: 100%;
  59.         width: 560px;
  60.         background-color: green;
  62.         /* 浮动 */
  64.         float: left;
  65.       }
  66.     </style>
  67.   </head>
  68.   <body>
  69.     <header>页眉</header>
  70.     <main>
  71.       <aside class="left">左侧</aside>
  72.       <article>内容</article>
  73.       <aside class="right">右侧</aside>
  74.     </main>
  75.     <footer>页脚</footer>
  76.   </body>
  77. </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>Document</title>
  8.     <style>
  9.       /* 初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  16.       /* 页眉页脚 */
  17.       header,
  18.       footer {
  19.         height: 80px;
  20.         background-color: lightblue;
  21.       }
  23.       /* 主体 */
  24.       main {
  25.         width: 960px;
  26.         min-height: 600px;
  27.         height: 700px;
  28.         margin: auto;
  29.         background-color: #cccccc;
  31.         position: relative;
  32.       }
  33.       /* 左侧 */
  34.       .left {
  35.         width: 200px;
  36.         min-height: 600px;
  37.         height: 100%;
  38.         background-color: blue;
  39.         /* 定位 */
  40.         position: absolute;
  41.         top: 0;
  42.         left: 0;
  43.       }
  45.       /* 右侧 */
  46.       .right {
  47.         width: 200px;
  48.         min-height: 600px;
  49.         height: 100%;
  50.         background-color: blue;
  51.         /* 定位 */
  52.         position: absolute;
  53.         top: 0;
  54.         right: 0;
  55.       }
  57.       /* 内容 */
  58.       article {
  59.         min-height: 600px;
  60.         height: 100%;
  61.         width: 560px;
  62.         background-color: green;
  64.         /* 定位 */
  65.         position: absolute;
  66.         top: 0;
  67.         left: 200px;
  68.       }
  69.     </style>
  70.   </head>
  71.   <body>
  72.     <header>页眉</header>
  73.     <main>
  74.       <aside class="left">左侧</aside>
  75.       <article>内容</article>
  76.       <aside class="right">右侧</aside>
  77.     </main>
  78.     <footer>页脚</footer>
  79.   </body>
  80. </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>Document</title>
  7.   </head>
  8.   <style>
  9.     /* 初始化 */
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.       box-sizing: border-box;
  14.     }
  15.     /* 页眉页脚 */
  16.     header,
  17.     footer {
  18.       height: 80px;
  19.       background-color: lightblue;
  20.     }
  22.     /* 主体 */
  23.     main {
  24.       width: 100%;
  25.       min-height: 600px;
  26.       height: 700px;
  27.       margin: auto;
  28.       background-color: #cccccc;
  30.       /* 内边距 */
  31.       padding: 0 300px;
  33.       /* 清除浮动 */
  34.       clear: both;
  35.     }
  37.     /* 边栏公共样式 */
  38.     aside {
  39.       width: 200px;
  40.       height: 100%;
  41.       background-color: blue;
  42.     }
  44.     /* 内容区样式 */
  45.     article {
  46.       width: 100%;
  47.       height: 100%;
  48.       background-color: lightgreen;
  49.     }
  51.     /* 主体元素浮动 */
  52.     main > * {
  53.       float: left;
  54.     }
  56.     /* 左边栏 */
  57.     .left {
  58.       margin-left: -100%;
  59.       position: relative;
  60.       left: -200px;
  61.     }
  63.     /* 右边栏 */
  64.     .right {
  65.       margin-left: -200px;
  66.       position: relative;
  67.       left: 200px;
  68.     }
  69.   </style>
  70.   <body>
  71.     <header>页眉</header>
  72.     <main>
  73.       <article>内容</article>
  74.       <aside class="left">左侧</aside>
  76.       <aside class="right">右侧</aside>
  77.     </main>
  78.     <footer>页脚</footer>
  79.   </body>
  80. </html>

上一条：margin:auto 块元素垂直居中下一条：用户自定义元素大小的计算方式（box-sizing)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多