简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 了解浮动和其网页布局
Blogger Information
Blog 11
fans 0
comment 0
visits 13358
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
了解浮动和其网页布局
Blueprint
Original
650 people have browsed it

了解浮动

什么是浮动

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>

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！