CSS 小結筆記之清除浮動

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

浮動是一個非常好用的屬性，但是有時會出現一些問題，需要進行清除浮動。例如

<!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 {
            background-color: red;
            width: 600px;
            /* height: 600px; */
        }
        
        .son1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        
        .son2 {
            width: 300px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        
        .div2 {
            width: 700px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>

    <div class="fa">aaa
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="div2"></div>
</body>

</html>
View Code

在父盒子沒有給出高度的情況下，子盒子浮動不會將父盒子撐開來。

清除浮動使用clear:left|right|both 一般使用clear：both，具體方法如下：

1、在浮動標籤後邊新增一個額外的clear標籤例如<div style="clear:both"></div>這樣做的方法
例如 
<body>
    <div class="fa">aaa
        <div class="son1"></div>
        <div class="son2"></div>
        <div style="clear:both"></div>
    </div>
    <div class="div2"></div>
</body>
View Code

結果如下，這種方法簡單明瞭，但是會增加額外的標籤

2、父級新增overflow:hidden|auto|scroll 
在.fa 的css屬性中增加overflow:hidden ，結果也如上圖所示，例如 
.fa {
            background-color: red;
            width: 600px;
            overflow: hidden;
        }
這種方法方便快捷，但是元素內容多時易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素

3、使用after偽元素進行清除浮動

   .clearfix:after {
            content: ".";
            /* 最好給content制定一個值防止舊版瀏覽器有空隙 */
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
            /* 星號代表是ie6、ie7能識別的特殊符號
            zoom 是ie6、ie7清除浮動的方法*/
        }

這樣給父盒子增加一個clearfix  類即可實現1中的圖片效果。

4、同時使用after和before清除浮動
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }

用法和方法三一樣，給父元素增加clearfix 類即可

第3、4種方法都是目前常用的方法，不增加多餘標籤，但是ie6和ie7不支援after，需要使用zoom：1來清除浮動

 

 

 

相關文章