前端瑣記·浮動

時間 2019-11-10

標籤前端瑣記浮動简体版

原文原文鏈接

　　世事洞達皆學問，人情練達即文章。浮動從何而來？浮動的應用要注意些什麼？css

　　1. 浮動從何而來？html

　　這個問題要追溯到盒子的定位了，盒子的定位由position，float來決定。position有static,relative,absolute,fixed，inherit五個值，具體請查閱前幾天的博客「回頭看看盒子模型」，float的取值一共也是四個：left,right,none,inherit。具體表示什麼這裏就再也不鰲餘，以避免拉低你們智商。。。爲了給元素方便的定位佈局，因而就有了浮動。瀏覽器

　　2. 浮動的應用要注意些什麼？佈局

　　換言之如何更好的利用浮動，先了解float的幾個特性：測試

　　2.1 浮動元素徹底脫離文檔流，至關於飛在了文檔流之上，因此他會遮蓋下一層的元素。spa

　　2.2 浮動不會對他的上一個兄弟元素產生任何影響，可是他的下一個兄弟元素會佔據他的位置，緊貼到該元素以前沒有設置浮動的元素以後。由於他再也不佔用文檔流中的位置，因此他的兄弟確定要補上的。要注意的是，若是該元素的下一個兄弟元素中有內聯元素（一般是文字），則會圍繞該元素顯示，造成「文字圍繞圖片」的效果。而後呢，結果可沒有那麼簡單。code

　　2.2.1 只有圖片設置浮動的狀況　 orm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .wrap {width: 500px;;font-family: "微軟雅黑";}
            .img_float {float: left;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="img/cute.jpg" alt="" class="img_float"/>
            <p>請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            </p>
        </div>
    </body>
</html>

　　2.2.2 給文字加p標籤以後（文字和圖片的關係同上）htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .wrap {width: 500px;;font-family: "微軟雅黑";}
            .img_float {float: left;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="img/cute.jpg" alt="" class="img_float"/>
            <p>請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            </p>
        </div>
    </body>
</html>

2.2.3既然position和float都是用於元素定位的，而且position:absolute,fixed和float都會令元素脫離文檔流，那麼有意思的問題來了，當position碰到float會怎麼樣？blog

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .wrap {width: 500px;;font-family: "微軟雅黑";position: relative;}
            .img_float {float: left;position: absolute;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="img/cute.jpg" alt="" class="img_float"/>
            <p>請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            </p>
        </div>
    </body>
</html>

再來看一下把圖片的float屬性去掉後的樣子吧~

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .wrap {width: 500px;;font-family: "微軟雅黑";position: relative;}
            .img_float {position: absolute;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="img/cute.jpg" alt="" class="img_float"/>
            <p>請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            請注意圖片和文字關係哦，這是float測試的小栗子請注意圖片和文字關係哦，這是float測試的小栗子
            </p>
        </div>
    </body>
</html>

兩張圖片同樣，想到了什麼？對！就是當position遇到float以後，float就失靈了~由於position的優先級要高於float。

到底遮住了多少？前面說到absolute脫離了文檔流，這樣的話他就比較自由了，能夠是飛在天上的小天使（z-index >= 1）,也能夠是白髮蒼蒼的土地神（z-index <=-1）(注意z-index取整數)，當圖片的z-index低於文字時，遮住了多少一目瞭然~

還有一個小問題~

這是因爲瀏覽器對元素有必定的默認margin形成的，因此給元素加標籤的時候必定不要忘記設置{margin:0;padding:0}，給元素統同樣式通常會寫在樣式表的最頭上，*{margin:0;padding:0}可是這樣寫並很差，雖然這是最簡單的作法，友好一些的寫法以下：

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
  margin: 0;
  padding: 0;
}

2.3. 設置浮動後該元素會變爲塊級元素，至關於給該元素設置了display:block,(和設置position:absolute;同樣)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。