CSS 小結筆記之浮動

Assist發表於2018-09-05
CSS筆記

在css中float是一個非常好用的屬性，float最基本用法是用來做文字環繞型的樣式的。

基本用法：float:left | right

例如

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="div1">
        <P>
            <img src="Images/2.jpg" alt=""> 這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字這裡有一大段超級長的文字
        </P>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="div2"></div>
</body>

</html>
View Code

 

如果一段較長文字和圖片放在一起，顯示的效果如下

這裡文字圖片會把文字擠開，顯得不好看。而給圖片加上float屬性後即可變成文字環繞型顯示

img {
            float: left;
        }

結果為

而float最強大的用法是在盒子佈局上。正常塊級元素都是單獨佔一行，而使用float可以實現多個塊級元素擺在一行。例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1 {
            width: 600px;
            height: 400px;
            background-color: red;
        }
        
        .left {
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        
        .right {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
    </style>
</head>

<body>
    <div class="div1">div1
        <div class="left">leftdiv</div>
        <div class="right">rightdiv</div>
    </div>
</body>
</html>
View Code

顯示結果為

浮動的特點：

1、浮動，顧名思義就是浮起來動（廢話！(╯°Д°)╯︵┻━┻），浮動相當於將網頁分成上下兩層，浮動的元素在上層，普通的元素在下層。通過下例可以直觀的看出來：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        .div2 {
            width: 800px;
            height: 200px;
            background-color: aqua;
        }
        
        .left {
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
            margin-left: 30px;
        }
        
    </style>
</head>

<body>

    <div class="left">leftdiv</div>

    <div class="div2">div2</div>
   
</body>
View Code

效果圖如下：

可以看到浮動的div將非浮動的div蓋在了下面，因為他們是兩層，所以相互之間並不會擠到對方，而想要解決這個問題，需要給浮動的標籤巢狀一個外標籤即可，這樣可以讓浮動只侷限於一個標籤進行。

外標籤需要指明寬高大小才行，而有一些情況不能確定高度大小，這時候想要解決這個問題可以通過取消浮動來解決，具體可以檢視CSS 小結筆記之取消浮動

2、浮動會自動對齊父盒子，但不會超過邊框，也不會影響到父盒子的margin和padding，即浮動是在盒子內部浮動。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 200px;
            height: 200px;
            margin: 100px;
            background-color: aqua;
            padding: 50px;
            border: 10px orange solid;
        }
        
        .son {
            width: 100px;
            height: 100px;
            float: left;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>

</html>
View Code

3、浮動的排列與上一個塊級元素有關，上一個元素是浮動的，則與上一個元素頭部對齊（寬度足夠的情況），上一個元素不是浮動則與上一個元素的底部對齊。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa1,
        .fa2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 5px solid pink;
            margin: 20px;
        }
        
        .fa1 .son1 {
            width: 50px;
            height: 50px;
            background-color: green;
            float: left;
        }
        
        .fa1 .son2 {
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }
        
        .fa2 .son1 {
            width: 50px;
            height: 50px;
            background-color: green;
        }
        
        .fa2 .son2 {
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }
    </style>
</head>

<body>
    <div class="fa1">
        <div class="son1"></div>
        <div class="son2"></div>

    </div>
    <div class="fa2">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

</html>
View Code

4、浮動會把元素改為行內塊元素，因此有浮動時可以不需要再轉換模式了。

相關文章