CSS浮动

浮动可以使一个元素离开自己原来的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界大概别的浮动元素为止。别的，在浮动元素之后界说的文本大概行内元素都将围绕在浮动元素的一侧，从而可以实现笔墨围绕的效果，类似于
Word 中图文混排。
留意：浮动（float）属性仅对非绝对定位的元素有效，跟随浮动元素的文本或行内元素将围绕在浮动元素的另一侧，比方向左浮动的话别的元素将围绕在浮动元素的右侧。
float 属性有三个可选值，如下表所示：
值形貌left元素向左浮动right元素向右浮动none默认值，元素不浮动inherit从父元素继承 float 属性的值别的，在使用 float 属性时还必要留意以下几点：

• 如果设置了 float 属性且属性的值不为 none 时，若 display 属性的值为 inline-table，那么 display 现实会被设置为 table，若 display 的属性值为 inline、inline-block、run-in、table-* 等值，那么 display 现实会被设置为 block，别的情况则没有厘革；
  
• 当元素设置了绝对定位大概 display 属性的值为 none 时，float 属性无效；
  
• 相邻的浮动元素，如果空间充足它们会紧挨在一起，分列成一行。
  

【示例】使用 float 属性为元素设置浮动属性：

1. <!DOCTYPE html>
3. <html>
5. <head>
7.     <style>
9.         .a-box {
11.             width: 445px;
13.             height: 120px;
15.             border: 1px solid red;
17.             padding: 20px;
19.             overflow: hidden;
21.         }
23.         .b-box {
25.             width: 100px;
27.             height: 100px;
29.             border: 1px solid green;
31.             color: red;
33.         }
35.         .c-box {
37.             width: 445px;
39.             height: 120px;
41.             border: 1px solid red;
43.             padding: 20px;
45.         }
47.         .d-box {
49.             width: 100px;
51.             height: 100px;
53.             border: 1px solid green;
55.             float: left;
57.             color: red;
59.         }
61.     </style>
63. </head>
65. <body>
67.     <div class="a-box">
69.         浮动指的是让设置了 float 属性的元素脱离正常的位置，在父元素内容区中向左或向右移动，<div class="b-box">没有浮动的元素</div>直到碰到父元素内容区的边界或者其它浮动元素为止，父元素中的文本和行内元素将环绕浮动元素。
71.     </div>
73.     <div class="c-box">
75.         浮动指的是让设置了 float 属性的元素脱离正常的位置，在父元素内容区中向左或向右移动，<div class="d-box">左浮动的元素</div>直到碰到父元素内容区的边界或者其它浮动元素为止，父元素中的文本和行内元素将环绕浮动元素。
77.     </div>
79. </body>
81. </html>

复制代码

运行效果如下图所示：

图：float 属性演示
扫除浮动

元素浮动之后，会对附近的元素造成肯定的影响，为了消除这种影响您可以使用 clear 属性来扫除浮动，属性的可选值如下：
值形貌left左侧不允许浮动元素right右侧不允许浮动元素both左右两侧均不允许浮动元素none默认值，允许浮动元素出现在左右两侧inherit从父元素继承 clear 属性的值下面通过示例来演示一下 clear 属性的使用：

1. <!DOCTYPE html>
3. <html>
5. <head>
7.     <style>
9.         .box {
11.             width: 480px;
13.             height: 260px;
15.             border: 1px solid red;
17.         }
19.         .a-box {
21.             width: 50px;
23.             height: 150px;
25.             background-color: #CCC;
27.             float: left;
29.         }
31.         .b-box {
33.             width: 155px;
35.             height: 60px;
37.             border: 1px solid black;
39.             float: left;
41.         }
43.         .c-box {
45.             width: 100px;
47.             height: 100px;
49.             background-color: #007FFF;
51.             clear: left;
53.         }
55.     </style>
57. </head>
59. <body>
61.     <div class="box">
63.         <div class="a-box">a-box</div>
65.         <div class="b-box">b-box</div>
67.         <div class="c-box">c-box</div>
69.     </div>
71. </body>
73. </html>

复制代码

运行效果如下图所示：

图：clear 属性演示
通过运行效果可以看出，若为 a-box、b-box 两个元素设置 float 属性就会导致 c-box 向上移动，与 a-box、b-box
重叠在一起，此时为 c-box 添加 clear 属性扫除浮动即可办理这一题目。
原文所在CSS浮动