這是我們發現兩個div之間存在一個空隙，這是為什么呢？

    瀏覽器會將換行符，縮進符，以及空格當做一個空格來處理，即使暗戀兩次空格，或者一個換行加一個空格，等等都會解析成一個空格使用。這個空格的大小則是font-size/2大小。去除這個空隙有很多辦法。

    1.設置div2的margin-left:-font-size/2

    2.設置兩個div的父標簽的font-size:0

    3.設置負的word-spacing

    第二種：float：left/right

    float屬性可以讓元素脫離常規文檔流，沿著容器的左側或者右側進行水平排列。

    這種方式可以說是用的最多的，但是有個問題，在自適應布局中一般不會固定元素的高寬，會根據內容大小來自動調整，這是如果子元素都是浮動元素的話就會存在高度塌陷。

    舉栗子

    這里將上一個栗子中的子元素div故意改成了span,其實想表達float可以將元素隱式的轉換成block元素（position:absolute/fixed亦可），所以自然就可以設置寬度和高度。

    那么盒子水平排列之后存在什么問題呢？沒錯！父容器高度塌陷。這時父容器div的高度為0，因為浮動元素會脫離常規文檔流，它的父容器計算高度時會忽略它。這是我們不想看到的，因為這個高度塌陷的DIV后面如果還有其它常規流標簽的話，那么頁面就會出現錯亂等不想看到的結果。

    解決辦法自然就是清除浮動，主要通過兩種方式清除浮動：

    1.clear:left/right/both，專門用來清除浮動的CSS。

    2.BFC，因為BFC有一條規則“計算BFC的高度時，浮動元素也參與計算”。

    說一下用clear清除浮動的幾種方法：

    1.最后一個子元素后面加一個空標簽，然后設置其樣式clear:both。

    2.在最后一個浮動子元素中，利用偽元素::after，添加clear樣式清除浮動

    第三種：table布局

    這種布局方式其實不常用，因為它存在種種問題。

    渲染速度較慢

    增加html代碼量，不易維護

    標簽的名字不符合html語義化，table本來就是做表格用的，拿來布局甚是不妥

    標簽結構較死，后期修改成本較高

    等等，此處不作過多闡述。總之，盡量用table布局

    第四種：絕對定位

    這種方式日常開發中用的也較多，前面提到float可以讓元素脫離常規文檔流，這里position:absolute/fixed也具有同樣的效果，處理辦法在float布局中已經提到了，這里搬來即可。

    這里要說一下position:absolute絕對定位，以它的第一個父級并且是position:absolute/relative/fixed等飛static定位的元素為基點進行定位，如果找不到則以根元素為基準進行定位。一般都是采用父元素position:ralative，子元素position:absolute結合使用。

    第五種：css3的彈性布局

    彈性布局因為其兼容性所以還沒有得到廣泛的認可，不過我覺得以后它肯定會獨占鰲頭，就跟我看好html的視頻播放器一樣，早晚都會干敗flash，只是時間問題?。?！

    第六種：transform:translate

    CSS3中用于動畫的一個樣式，但是他可是讓兩個元素橫向排列，這里不多說直接上代碼，請用谷歌瀏覽器運行一下：

    右邊