問(wèn)題描述

問(wèn)題解答

個(gè)人來(lái)看

1、絕對(duì)定位完全脫離了普通流(flow，后面不再說(shuō)明)，無(wú)法跟普通流建立交互關(guān)系（普通流能影響絕對(duì)定位，但絕對(duì)定位不影響普通流）。這樣來(lái)說(shuō)，在一些彈性布局的場(chǎng)景中，絕對(duì)定位就存在一些缺陷，它只適應(yīng)也固定布局場(chǎng)景。

2、浮動(dòng)，本身不是用來(lái)做布局的，而是做文字環(huán)繞效果。但是CSS2.1好像也就這個(gè)屬性能夠快速地滿足一些需求，因此才有了浮動(dòng)布局。浮動(dòng)相對(duì)絕對(duì)定位好處是，它可以影響IFC，也可以通過(guò) clear 清除浮動(dòng)影響塊級(jí)布局，可以與普通流建立良好的交互。 而且浮動(dòng)本身是脫離普通流的，在頂端對(duì)齊和右對(duì)齊上有特別的優(yōu)勢(shì)。而 inline-block 的垂直對(duì)齊上有更多選擇。

3、inline-block，這個(gè)屬性也不是用來(lái)布局的（偏向于排版），但是在 CSS3 普及之前，它的用處也很大。該元素的盒子在行框中進(jìn)行格式化，其順序與源HTML中的順序一一對(duì)應(yīng)。 同時(shí)該元素不脫離普通流，這比浮動(dòng)來(lái)說(shuō)有更大的優(yōu)勢(shì)，它可以跟普通流產(chǎn)生自然交互，而不必要借助去其他屬性。而且相比浮動(dòng)，相鄰元素間的垂直對(duì)齊方式，inline-block 比 float 更加靈活， float 格式化時(shí)有一條規(guī)則，就是越高越好（因此常常表現(xiàn)為頂端對(duì)齊），而 inline-block 在行內(nèi)格式化，擁有更靈活的垂直對(duì)齊方式。

應(yīng)用：

如果使用了浮動(dòng)，清除浮動(dòng)就會(huì)成為你的副作用，而且如果你沒有良好的HTML/CSS 結(jié)構(gòu)的話，清除浮動(dòng)是一個(gè)很復(fù)雜的事情。

inline-block 雖然避免了清除浮動(dòng)的事情，但是會(huì)有另一個(gè)副作用，即空白符問(wèn)題。這個(gè)問(wèn)題的解決方案也令人十分蛋疼，因?yàn)楫吘?inline-block 不是布局屬性，它僅僅是行內(nèi)級(jí)塊容器盒子。 同時(shí)，垂直居中、行高等問(wèn)題也有可能是一個(gè)副作用。

其他：

其實(shí)在 CSS2.1中，利用表格 table 布局也是非常強(qiáng)大的方法。表格布局在同行等高，同列等寬，垂直居中對(duì)齊上面的優(yōu)勢(shì)是其他方法很難媲美的。甚至于在自適應(yīng)場(chǎng)景中，表格布局的靈活性也非常出眾。