清除浮動的方式

時間 2019-11-09

標籤清除浮動方式简体版

原文原文鏈接

原文：

　　簡書原文：https://www.jianshu.com/p/c7f02b50a8f5html

清除浮動的緣由

　　當給元素添加上浮動的時候，會形成頁面佈局上的一些意想不到的結果，如：子元素設置浮動沒法撐起沒有設置高度的父元素。segmentfault

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width:300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

　　能夠看出本應包住3個 inner DIV的 outer DIV 卻沒有包住他們，此刻只剩一條由上下邊框貼合組成的線，同時 footer DIV元素也跑到了三個浮動元素的底下。瀏覽器

清除浮動的方式

一、加高度

　　這是最簡單的辦法，加上高度以後，讓包含框包含浮動框，不過這不適用於高度不明的包含框。佈局

二、加額外空標籤而且定義clear：both屬性從而清除浮動

　　這是早期廣泛使用的方法，可是對於有代碼潔癖的人來講，解決的不夠完美，通常狀況下不會使用這一種方式來清除浮動。由於這種清除浮動的方式會增長頁面的標籤，形成結構的混亂。網站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="clearfix"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

三、經過將包含框設置成BFC從而清除浮動

3.一、經過僞類元素清除浮動

　　經過僞類元素實現清除浮動的效果，或者說經過僞類元素造成一個BFC的塊框，從而讓內部的float的元素不影響到外部元素的排版，也就是不會出現由於出現浮動而撐不起盒子高度的狀況。
　　zoom:1：是爲了兼容IE瀏覽器的haslayout佈局屬性，觸發其佈局效果，產生和BFC相似的效果。htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
        .clearfix:after{  /*最簡方式*/
            content: '';
            display: block;
            clear: both;
        }
        /* 新浪使用方式
        .clearfix:after{ 
            content: '';//設置內容爲空
            height: 0;//高度爲0
            line-height:0;//行高爲0
            display: block;//將文本轉爲塊級元素
            visibility: hidden;//將元素隱藏
            clear: both;//清除浮動
        }
        */
        .clearfix{ /*兼容 IE*/
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="outer clearfix">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.二、經過overflow:hidden清除浮動

　　經過給父元素設置overflow:hidden;來將父元素變成一個BFC，從而清除浮動。
　　缺點：這種方式會隱藏超出包含框的內容blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
            overflow: hidden;
            zoom: 1;/*兼容 IE*/
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>