單側(cè)固定：

設(shè)置圖片的width以及左浮動(dòng)，

同時(shí)設(shè)置padding-left/margin-left來使左側(cè)固定（其中，margin-left或padding-left為0時(shí)即以前的文字環(huán)繞效果）

添加float之后，元素之間的空格消失

clearfix應(yīng)用在包含浮動(dòng)子元素的父級(jí)元素上

包裹的特性：

1、寬度收縮

2、高度伸開

3、內(nèi)部變化不影響外部

float的設(shè)計(jì)初衷是為了文字的環(huán)繞效果

https://segmentfault.com/a/1190000015759719?utm_source=tag-newest

塊級(jí)元素

會(huì)占領(lǐng)頁(yè)面的一行，其后多個(gè)block元素自動(dòng)換行、 可以設(shè)置width，height，設(shè)置了width后同樣也占領(lǐng)一行、同樣也可以設(shè)置?? margin與padding屬性。

ps:常見的塊級(jí)元素:div,img,ul,form,p等

行級(jí)元素

與其他元素在同一行上，高度，行高以及底邊距不可改變，高度就是內(nèi)容文字或者圖片的寬度，不可以改變。

ps：em，strong，br,input等

display:inline-block，block，inline元素的區(qū)別

1、display：block將元素顯示為塊級(jí)元素，從而可以更好地操控元素的寬高，以及內(nèi)外邊距，每一個(gè)塊級(jí)元素都是從新的一行開始。

2、display : inline將元素顯示為行內(nèi)元素，高度，行高以及底邊距不可改變，高度就是內(nèi)容文字或者圖片的寬度，不可以改變。多個(gè)相鄰的行內(nèi)元素排在同一行里，知道頁(yè)面一行排列不下，才會(huì)換新的一行。

3、display：inline-block看上去值名inline-block是一個(gè)混合產(chǎn)物，實(shí)際上確是如此，將元素顯示為行內(nèi)塊狀元素，設(shè)置該屬性后，其他的行內(nèi)塊級(jí)元素會(huì)排列在同一行。比如我們li元素一個(gè)inline-block，使其既有block的寬度高度特性，又有inline的同行特性，在同一行內(nèi)有不同高度內(nèi)容的元素時(shí)，通常要設(shè)置對(duì)齊方式如vertical-align: top;來使元素頂部對(duì)齊。

float，此屬性在IE中用obj.style.styleFloat="left";

　　　　　　　　在ff等其他瀏覽器中用obj.style.cssFloat="left";

第三中兼容性寫法：obj.style['cssFloat' in obj.style?'cssFloat':'styleFloat']='left'；具體例子如下

2.currentStyle和getComputerStyle可以獲取元素的內(nèi)部樣式和外部樣式，但是currentStyle只適用于IE，getComputerStyle適用于FF、opera、safari、chrome

下面的方法可以解決兼容性

display?=?this.currentStyle??this.currentStyle.display:?window.getComputedStyle(this,?null).display;

display代表css屬性，可以是width，color，backgroundSize等

讓IE7飆淚的浮動(dòng)問題

1. 含clear的浮動(dòng)元素包裹不正確的問題

2. 浮動(dòng)元素倒數(shù)2個(gè)莫名垂直間距問題

3. 浮動(dòng)元素最后一個(gè)字符重復(fù)問題

4. 浮動(dòng)元素樓梯排列問題

5. 浮動(dòng)元素和文本不在同一行的問題（解決：左側(cè)左浮動(dòng)，右側(cè)右浮動(dòng)）

文字環(huán)繞變身

float:left（左青龍）

float:right(右白虎）

text-align:center(中間是標(biāo)題）

文字環(huán)繞衍生-單側(cè)固定

width+float(一側(cè)）

padding-left/margin-left（另一側(cè)）

DOM與顯示位置匹配的單側(cè)固定布局

width:100%+float

????padding-left/margin-left

width+float+margin負(fù)值

高級(jí)進(jìn)化-智能自適應(yīng)尺寸

float(一側(cè)）

display:table-cell IE8+(另一側(cè)）

display:inline-block IE7

1.元素block塊狀化（磚頭化）

2.破壞性造成的緊密排列特性（去空格化）

nbsp（空格）看作字符

砌磚布局的問題

1. 妙脆角-嘎吱脆（容錯(cuò)性比較糟糕，容易出問題）

2. 吝嗇鬼-重用廢（這種布局需要元素固定尺寸，很難重復(fù)使用）

3. 洋蔥頭-IE7飆淚（在低版本的IE下會(huì)有很多問題）

盡量少用float砌磚頭