浮動原理及清除浮動

站在用戶的角度思考問題，與客戶深入溝通，找到陜西網(wǎng)站設(shè)計與陜西網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋陜西地區(qū)。

上節(jié)回顧

在上節(jié)的《Web前端入門學(xué)習(xí)（4）—— 塊級元素和行內(nèi)元素之特征與轉(zhuǎn)換》中(http://cherry360.blog.51cto.com/12176744/1863945)，介紹了塊級元素和行內(nèi)元素的特征，及粗略介紹了如何進行轉(zhuǎn)換。加上display屬性，可以指定元素的類型，如display:block、display:inline，以及display:inline-block。當(dāng)然用得最多的是最后一個display:inline-block。結(jié)合例子來看：

例1：

    
div1
    
div2
    span1
    span2

---

顯示結(jié)果：

例2，如果在css樣式中加上display:inline-block,即把CSS樣式改成：

div,span{
    height:100px;
    width:100px;
    background:blue;
    border:1px solid red;
    display:inline-block;
}

顯示效果將會變成：

從上面的對比結(jié)果可以看出，屬性display:inline-block的效果是，可以把塊級元素在同一行內(nèi)顯示，而行內(nèi)元素也變得支持寬高。但是使用這種方式，也有一些隱患問題，就是換行被解析。也就是說，標簽之間換行之后，顯示出來的效果中間是存在間隙的，并且不同瀏覽器之間的間隙大小不一致。此外，IE6、IE7是不支持塊級元素的inline-block效果。那么有其他辦法可以解決嗎？這就是本節(jié)需要討論的問題了。

浮動原理

任何元素都可以被浮動，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框位置；由于浮動框不在文檔流中，所以文檔流中的元素會表現(xiàn)得就像浮動框不存在一樣。文檔流是文檔中可顯示對象在排列時所占用的位置。話不多說，看例子最直觀：

例3：

    div1