你所不瞭解的float（濫用float的怪異現象）

時間 2019-11-18

標籤所不瞭解 float 濫用怪異現象欄目 CSS 简体版

原文原文鏈接

float設計初衷就是爲了實現文字環繞效果

本來頁面流佈局顯示如上圖所示，運用了float屬性後就顯示爲以下圖所示，這就是浮動的設計初衷css

float的一些特性：包裹性、破壞性。html

包裹的特性其實主要有三個表現：收縮、堅挺、隔絕。瀏覽器

float破壞性主要表如今使父容器塌陷（浮動使得父容器塌陷是標準而非bug，不然若是不讓父窗口塌陷怎麼實現文字環境效果）ide

浮動的破壞性只是單純的爲了實現文字環繞效果佈局

BFC（block format context）塊級格式化上下文this

如何解決浮動形成的父容器塌陷？

也就是說有兩種方法來解決，那麼這兩種方法實現的差別在哪？spa

clear方式的具體實現？設計

可是上述方法會有以下圖所示不足3d

BFC/hasLayout具體實現方式？code

兼容各瀏覽器清除浮動的通用方式

.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}
.clearfix{*zoom:1;}

其實還有更好的方式

        .clearfix:after
        {
            content: '';
            display: table;
            clear: both;
        }

        .clearfix
        {
            *zoom: 1;
        }

濫用浮動

其實.clearfix的樣式只應用在包含浮動子元素的父級元素上。

若是放到不包含浮動子元素的父級元素上那就是濫用。若是亂用hasLayout每每會讓IE6/IE7作出出格的事情，由於浮動會觸發hasLayout，因此濫用浮動會發生不少怪異現象。

打句廣告：在html中通常會用nbsp;來表示空格，事實上nbsp原來是以下圖所示的意思

運用浮動的一些特性

用demo先來講說第2個特性吧，html代碼以下所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮動與display:block化</title>
    <style>
        .ovh
        {
            overflow: hidden;
        }

        .red
        {
            color: #cd0000;
        }

        [hidden]
        {
            display: none;
        }
    </style>
</head>

<body>
    <p id="first">這是一個沒有設置<code>float</code>屬性的按鈕：</p>
    <p class="ovh"><input type="button" id="btnShow" value="點擊我顯示display屬性值"></p>
    <p hidden="">此時，按鈕的display屬性值是：<span id="result" class="red"></span></p>
    <p>點擊下面的按鈕讓上面的按鈕添加<code>float: left</code>的聲明：</p>
    <p><input type="button" id="btnAdd" value="上面的按鈕添加float:left"></p>
    <script>
        var btnShow = document.getElementById("btnShow"),
            btnAdd = document.getElementById("btnAdd"),
            result = document.getElementById("result"),
            first = document.getElementById("first");

        if (btnShow && btnAdd && result) {
            btnShow.onclick = function () {
                // 得到該按鈕的display值
                var display = this.currentStyle ? this.currentStyle.display : window.getComputedStyle(this, null).display;
                // 顯示結果
                result.innerHTML = display;
                result.parentNode.removeAttribute("hidden");
                // repain fix IE7/IE8 bug
                document.body.className = "any";
            };

            // 設置浮動按鈕的點擊事件
            btnAdd.onclick = function () {
                btnShow.style["cssFloat" in this.style ? "cssFloat" : "styleFloat"] = "left";
                // 文字描述的變化
                this.value = "上面的按鈕已經設置了float:left";
                btnShow.value = "再次點擊我確認display屬性值";
                first.innerHTML = first.innerHTML.replace("沒有", '<del>沒有</del>');
                // 結果隱藏
                result.parentNode.setAttribute("hidden", "");
                // 按鈕禁用
                this.setAttribute("disabled", "");
            };
        }
    </script>
</body>
</html>

View Code

從上述代碼運行效果圖可知原先爲display:inline-block的元素因爲增長了float:left則變成display:block

再說說浮動去空格吧

示例代碼以下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮動去空格</title>
    <style>
        button
        {
            margin: 0;
        }

        p
        {
            clear: both;
        }
    </style>
</head>

<body>
    <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
    <button>按鈕4</button>
    <p><input type="button" id="trigger" value="點擊按鈕浮動"></p>
    <script>
        var trigger = document.getElementById("trigger"),
            buttons = document.getElementsByTagName("button");

        var length = buttons.length;

        if (trigger && length > 0) {
            trigger.onclick = function () {
                for (var index = 0; index < length; index += 1) {
                    buttons[index].style["cssFloat" in trigger.style ? "cssFloat" : "styleFloat"] = "left";
                }
            };
        }
    </script>
</body>
</html>

View Code

運行效果圖以下

原先按鈕之間是有空格的，點擊下面增長浮動按鈕後，原先按鈕就沒有任何空格了，事實上並不是空格去掉了，只是空格移動父容器全部浮動元素最後

浮動與佈局

最簡單的應用莫過於

浮動與單側固定佈局

有兩種方法

一、左邊元素使用width+float，右邊元素使用padding-left或者margin-left

二、左邊元素使用width+float，右邊元素也使用width+float不過此次是用right值

以下所示

        .left_img
        {
            width: 56px;
            float: left;
        }
        /* 下面這個是固定佈局寫法 */
        .right_text_fixed
        {
            width: 484px;
            float: right;
        }
        /* 下面這個是流體佈局寫法 */
        .right_text_flow
        {
            margin-left: 76px;
        }

浮動與智能自適應的流體佈局

核心代碼以下所示：

        .left_img
        {
            float: left;
            margin-right: 20px;
        }
        /* 下面這個是固定佈局寫法 */
        .right_text
        {
            display: table-cell;
            *display: inline-block;
            width: 2000px;
            *width: auto;
        }

讓IE7飆淚的浮動問題

一個一個來講（我說的是在IE7及如下瀏覽器）

包含clear的浮動元素包裹不正確

html代碼以下所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>含clear的浮動元素包裹不正確的bug</title>
    <style type="text/css">
        html, body
        {
            background: #fff;
            color: #000;
        }

        div
        {
            padding: 5px;
            margin: 5px;
            background-color: #eee;
            border: 1px solid #bbb;
            clear: left;
            color: black;
            float: left;
        }
    </style>
</head>

<body>
    <div>
        這個&lt;div&gt; 包含 float: left 和 clear: left. 與咱們一般理解的表現一致，寬度就是文字內容的寬度。
    </div>

    <div>
        這個一樣是一個 &lt;div&gt;, 左浮動，同時含有 clear: left  的 &lt;div&gt;. 由於這一段的文字內容很長，因此，按照咱們一般的理解，這個 &lt;div&gt; 佔據的長度應該有整個 body 這麼長。可是，在 Internet Explorer 7 下，事與願違。 這個具備左浮動，同時含有 clear: left 的 &lt;div&gt; 僅僅佔據了部分body的內容區域寬度。---- 我是佔位置的文字，我是佔位置的文字，我是佔位置的文字，我是佔位置的文字，我是佔位置的文字，我是佔位置的文字，我是佔位置的文字……
    </div>
    <div>
        這是第3個具備float: left 和 clear: left 的 &lt;div&gt; . 改變你瀏覽器的寬度。
    </div>
</body>
</html>

View Code

實現效果圖以下：

當咱們改變窗口大小時，效果圖以下

浮動元素倒數2個莫名垂直間距bug

html代碼

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮動元素倒數2個莫名垂直間距bug（超過3浮動元素）</title>
    <style type="text/css">
        html, body
        {
            background: #fff;
            color: #333;
        }

        div
        {
            width: 100px;
        }

        p
        {
            margin-right: 1px;
        }

        span
        {
            border: 1px solid #aaa;
            float: left;
            width: 120px;
            padding: 5px;
        }
    </style>

</head>

<body>
    <div>
        <p>
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
        </p>
    </div>
</body>
</html>

View Code

也就是說當超過3個浮動元素時，浮動元素倒數第2個元素則會在ie7及如下瀏覽器出現垂直間距問題，顯示以下圖所示

浮動元素倒數2個浮動最後一個字符重複bug

html代碼以下所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮動元素倒數2個浮動最後一個字符重複bug</title>
    <style type="text/css">
        html, body
        {
            background: #fff;
            color: #333;
        }

        div
        {
            width: 100px;
        }

        p
        {
            margin-right: 1px;
        }

        span
        {
            float: left;
            width: 120px;
        }
    </style>

</head>

<body>
    <div>
        <p>
            <span>A</span>
            <span>B</span>
            <span>C</span>
        </p>
    </div>
</body>
</html>

View Code

在ie7及以及顯示效果圖卻出現以下所示讓人啼笑皆非的場景（竟然多了一個C）

浮動元素與文本不在同一行的問題

html代碼以下所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮動與同一行的差別</title>
    <style type="text/css">
        html, body
        {
            background: #fff;
            color: #333;
        }

        div
        {
            background-color: #eee;
            border: 1px solid #bbb;
            padding: 5px;
        }

        span
        {
            float: right;
        }
    </style>

</head>

<body>
    <div>
        左側標題
        <span>右浮動</span>
    </div>
</body>
</html>