css 浮動

時間 2019-11-20

標籤 css 浮動欄目 CSS 简体版

原文原文鏈接

在css中，有一個咱們又愛又恨的屬性，浮動。愛，由於經過浮動，咱們能很方便地佈局；恨，浮動以後遺留下來太多的問題須要解決，css

特別是IE6-7。不少初學者不明白浮動從何而來？咱們爲什麼要清除浮動？清除浮動的原理是什麼？下面咱們一塊兒來學習一下吧！html

首先，爲什麼要設置浮動呢？而在網頁佈局中，咱們經常須要將兩個或者是多個div並排放置。因爲div獨佔一行，並排是不可能實現的。瀏覽器

因此咱們須要採用浮動佈局。佈局

浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會學習

影響到塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的測試

時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。spa

正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其餘普通流元素了，也就表現出高度爲0（高度塌陷）。code

在實際佈局中，每每這並非咱們所但願的，因此須要閉合浮動元素，使其包含框表現出正常的高度。htm

浮動能夠說是全部CSS屬性中的「破壞之王」，浮動的元素脫離標準流不受標準流約束，浮動的元素能夠互相貼靠，浮動的元素有字圍繞效果。blog

咱們再來看看，浮動的元素脫離標準流不受標準流約束會產生什麼效果。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
        .box1{  
            float: left;  
            width: 100px;  
            height: 200px;  
            background-color: green;  
        }  
  
        .box2{  
            width: 200px;  
            height: 300px;  
            background-color: red;    
        }  
  
    </style>  
</head>  
<body>  
    <div class="box1"></div>  
    <div class="box2"></div>  
</body>  
</html>

上面代碼中，綠色的盒子設置了浮動屬性，因此它會脫離標準流，紅色的盒子就覺得本身是標準流中的第一個盒，被渲染在上方，而漂浮在上方的綠盒子會遮蓋部分成盒子。

下面再來看一個例子，讓咱們對浮動進一步加深瞭解。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
    span{  
        width: 300px;  
        height: 400px;  
        background-color: blue;  
    }  
    </style>  
</head>  
<body>  
    <span>這是span</span>  
    <span>這是span</span>  
    <span>這是span</span>  
    <span>這是span</span>  
</body>  
</html>

　因爲span是行內標籤，他們會顯示在一行，並且你設置的長寬對span是沒有影響的，若是咱們將span設成浮動，span的長寬發生了變化。緣由是

浮動讓span脫離了標準文檔流的約束，使得span不在受標準文檔流的約束，因此能夠對span設置寬高了。　

最後來講說浮動能夠產生文本文本圍繞的效果。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
          
        .box1{  
            float: left;  
            width:100px;  
            height: 100px;  
            background-color:green;  
        }  
          
    </style>  
</head>  
<body>  
    <div class="box1">1</div>  
    <p>
       我是內容我是內容我是內我是內容我是內容我是內容我是內容我是內容
       我是內容我是內我是內容我是內容我是內容我是內容我是內容我是內容
       我是內我是內容我是內容我是內容我是內容我是內容我是內容我是內容



  </p>

 </body> </html>

測試的結果顯示綠色盒子脫離標準流不會覆蓋p中的文本，這就是浮動能夠產生文本圍繞的效果。

曾今看到過有人這麼理解浮動中圖文環繞，感受很形象，頗有趣。

文字圍繞圖片：當圖片不浮動時，圖片在廁所，文字們在餐廳。當圖片浮動時，圖片衝了水，

文字們聞聲而來到了廁所。誰知圖片沒出坑，因而文字們依次在廁所裏排起了隊。這時就會

出現文字圍繞圖片擺放的排列方式。

圖片與文字清除浮動的故事：當圖片浮動時，想讓文字不爲之所動，就用clear吧，喝了這杯忘情水，

圖片就算衝了水除了坑文字也仍舊不進廁所。

總結

浮動元素：

1.浮動元素不佔父級寬高 2.浮動元素都在一行內顯示 3.浮動元素均可以設置寬高和margin/padding 4.浮動元素默認內容撐開寬高 5.能夠去除瀏覽器的默認縫隙 6.浮動元素標籤會發生層疊，可是內容不會

目前主流清除浮動方法

clearfix:after {content:」.」; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

原理：經過僞類在結束加上空，而後清除浮動

優勢：完美兼容

overflow清除浮動

原理：overflow清除浮動

優勢：能夠作到兼容

缺點：當子元素高/寬大於父級時，會出現滾動條，固然若是父級大於子級，徹底能夠如此使用

父級加高 height：給父級設定高度

原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。

優勢：簡單，代碼少，容易掌握

缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題

建議：不推薦使用，只建議高度固定的佈局時使用

相關標籤/搜索

每日一句

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