CSS Float（浮动)

向右看齐 2022-06-09 14:49 320阅读 0赞

**CSS Float（浮动)**  
  
Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。  
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。  
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。  
浮动元素之后的元素将围绕它。  
浮动元素之前的元素将不会受到影响。  
如果图像是右浮动，下面的文本流将环绕在它左边：

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .all {
                width: 500px;
                height: 300px;
                border: 2px dotted red;
            }
    
            .float {
                width: 200px;
                height: 200px;
                border: 3px solid yellow;
                float: right;
            }
        </style>
    </head>
    <body>
    <div class="all">
        <div class="float">
            向右浮动的块
        </div>
        文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕 文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕
        文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕 文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕
        文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕文本会环绕
    </div>
    </body>
    </html>

截图：

![Center][]

float属性值：  
left 元素向左浮动。  
right 元素向右浮动。  
none 规定应该从父元素继承 float 属性的值。默认值。元素不浮动，并会显示在其在文本中出现的位置。  
inherit 规定应该从父元素继承 float 属性的值。  
  
注：在设置浮动中如果设置浮动的宽度位置不够则块会换行。  
**float向左浮动示例代码:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #all {
                width: 600px;
                height: 300px;
                border: 2px solid red;
            }
    
            .f1 {
                margin: 20px;
                width: 100px;
                height: 100px;
                border: 2px solid black;
                float: left;
            }
    
            .f2 {
                margin: 20px;
                width: 100px;
                height: 100px;
                float: left;
                border: 2px solid green;
            }
    
            .f3 {
                margin: 20px;
                width: 100px;
                height: 100px;
                float: left;
                border: 2px solid yellow;
            }
        </style>
    </head>
    <body>
    <div id="all">
        <div class="f1">
            块1向左浮动
        </div>
        <div class="f2">
            块2向左浮动
        </div>
        <div class="f3">
            块3向左浮动
        </div>
    </div>
    </body>
    </html>

效果截图：  
![Center 1][]  
float向右浮动示例代码:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>向右浮动</title>
        <style type="text/css">
            #all {
                width: 600px;
                height: 300px;
                border: 2px solid red;
            }
    
            .f1 {
                margin: 20px;
                width: 100px;
                height: 100px;
                border: 2px solid black;
                float: right;
            }
    
            .f2 {
                margin: 20px;
                width: 100px;
                height: 100px;
                float: right;
                border: 2px solid green;
            }
    
            .f3 {
                margin: 20px;
                width: 100px;
                height: 100px;
                float: right;
                border: 2px solid yellow;
            }
        </style>
    </head>
    <body>
    <div id="all">
        <div class="f1">
            块1向右浮动
        </div>
        <div class="f2">
            块2向右浮动
        </div>
        <div class="f3">
            块3向右浮动
        </div>
    </div>
    </body>
    </html>

效果截图：  
![Center 2][]  
  
**清除浮动(clear)**  
  
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。  
  
clear 属性的属性值有：  
left 在左侧不允许浮动元素。  
right 在右侧不允许浮动元素。  
both 在左右两侧均不允许浮动元素。  
none 默认值。允许浮动元素出现在两侧。  
inherit 规定应该从父元素继承 clear 属性的值  
  
示例代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>clear</title>
    
        <style type="text/css">
            #all {
                width: 600px;
                height: 300px;
                border: 2px solid red;
            }
    
            .f1 {
                margin: 20px;
                width: 100px;
                height: 100px;
                border: 2px solid black;
                float: left;
            }
    
            .f2 {
                margin: 20px;
                width: 100px;
                height: 100px;
                float: left;
                border: 2px solid green;
            }
    
            .f3 {
                margin: 20px;
                width: 100px;
                height: 100px;
                clear: both;
                border: 2px solid yellow;
            }
        </style>
    </head>
    <body>
    <div id="all">
        <div class="f1">
            块1向左浮动
        </div>
        <div class="f2">
            块2向左浮动
        </div>
        <div class="f3">
            块3我们设置了 clear:both  清除浮动（在左右两侧均不允许浮动元素）
        </div>
    </div>
    </body>
    </html>

效果截图：  
![Center 3][]  
注：对于CSS的清除浮动(clear)，这个规则只能影响使用清除的元素本身，不能影响其他元素。

子元素浮动父容器高度不能自适应的最好的解决方法是：在子元素"脚下"(父容器结尾)加`<div style="clear:both;" ></div>`，进行清除浮动。

[Center]: /images/20220609/8444abb700614f2994b9eccbf144d999.png
[Center 1]: /images/20220609/26598d4afff44d5d9f53e5382d1fb0d4.png
[Center 2]: /images/20220609/5d64b9cba0b7477191a6f9b9489dda52.png
[Center 3]: /images/20220609/e6d695929dd34a5a909e856d3bbf9da1.png