div水平排列

抄來的好文，記一下，寫前端

原文鏈接：https://www.cnblogs.com/bfgis/p/5533322.html

塊級元素默認是垂直排列的，而行內元素是水平排列的，而在布局時基本上都是用塊級元素，如div等常用塊級標簽，那么如何讓塊級元素也進行水平排列呢？我有100種方式（准確說是100-94種）讓元素水平排列，你知道幾種呢？

第一種：display：inline-block

　　首先得先了解塊級元素（block elements）和行內元素（inline elements）

　　　　塊級元素：塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列，常見的塊級元素有div,p,form,ul等等，更多塊級元素的可以去MDN上查閱https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

　　　　行內元素：高度和寬度由內容決定，自身沒法設定固定的大小，不存在垂直方向的margin和padding，排列方式是水平排列,行內元素在html所有元素占大多數，比如a,span,label,button,img,input......更多行內元素還是MDN查閱https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

　　　　這里可能有人會產生疑問，“button和img以及input等標簽可以設置寬度和高度也可以設置margin與padding，為什么它確實行內元素呢？”其實html元素主要有兩種划分方式，分別是“塊級元素與行內元素”，“替換元素與不可替換元素”。上面介紹了第一種划分方式，下面介紹一下第二種划分方式：

　　　　替換元素：通俗的理解就是具有width和height屬性的元素。替換元素類似於display:inline-block元素，可以設置高寬與內外邊距，主要包括img , input , textarea , select , object,audio和canvas在某些特定情形下為替換元素。更官方的定義https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

　　　　不可替換元素：除了替換元素剩下的都是不可替換元素（O(∩_∩)O）

扯了一大堆，我們知道display：inline-block可以讓元素橫向排列，但是這種布局可能會存在一點點小問題，舉栗子：

<style>
        div{
            display:inline-block;    width:200px;    height:200px;
        }
        .div1{
            background:green;
        }
        .div2{
            background:red;
        }
</style>

<div class = "div1">左邊</div>
<div class = "div2">右邊</div>

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

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

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

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

　　3.設置負的word-spacing

等等還有好多方式，此處只是拋磚引玉，具體細節可以看一下張鑫旭的這篇博客，研究的很細致。http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

第二種：float：left/right

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

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

舉栗子

<style>
        span{
            float:left;        width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            background:red;
        }
</style>

<div>
    <span class = "box1">左邊</span>
    <span class = "box2">右邊</span>
</div>

　　這里將上一個栗子中的子元素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樣式清除浮動

　　通過BFC解決高度塌陷：

　　　　為父元素創建BFC（摘自MDN），只要滿足以下任何一種都會為元素創立BFC。

A block formatting context is created by one of the following:

• the root element or something that contains it
• floats (elements where float is not none)
• absolutely positioned elements (elements where position is absolute or fixed)
• inline-blocks (elements with display: inline-block)
• table cells (elements with display: table-cell, which is the default for HTML table cells)
• table captions (elements with display: table-caption, which is the default for HTML table captions)
• elements where overflow has a value other than visible
• flex boxes (elements with display: flex or inline-flex)

我英語不好，上面的英文也能看懂，所以它就不需要翻譯了吧，建議動手試一下。

第三種：table布局

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

　　　　·渲染速度較慢

　　　　·增加html代碼量，不易維護

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

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

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

第四種：絕對定位

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

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

第五種：css3的彈性布局

　　html5的新特性，由於其功能太強大，兼容性太差，我現在還沒法駕馭它，所以沒敢獻丑，不過w3cplus有篇文章寫的很好，感興趣可以讀一下http://www.w3cplus.com/css3/using-flexbox-today.html。

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

第六種：transform:translate

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

<style>
        div{
            width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            transform: translateX(200px) translateY(-200px);
            background:red;
        }
    </style>

<div>
    <div class = "box1">左邊</div>
    <div class = "box2">右邊</div>
</div>

效果和前幾種方式一樣。

以上就是我說分享實現橫向布局的六種方式，其實每種方式都有很多大學問，我解釋描述了冰山一角，並且沒有過多的考慮瀏覽器的兼容性，不過還是希望對你有所幫助。

 

如有錯誤，請指正，

如果你有其它方式，請留言補充

感謝