-
單側固定：
設置圖片的width以及左浮動，
同時設置padding-left/margin-left來使左側固定（其中，margin-left或padding-left為0時即以前的文字環繞效果）
查看全部 -
添加float之后，元素之間的空格消失
查看全部 -
clearfix應用在包含浮動子元素的父級元素上
查看全部 -
包裹的特性：
1、寬度收縮
2、高度伸開
3、內部變化不影響外部
查看全部 -
float的設計初衷是為了文字的環繞效果
查看全部 -
float的特性：包裹與破壞查看全部
-
float的初衷:文字環繞效果查看全部
-
查看全部
-
塊級元素
會占領頁面的一行，其后多個block元素自動換行、 可以設置width，height，設置了width后同樣也占領一行、同樣也可以設置?? margin與padding屬性。
ps:常見的塊級元素:div,img,ul,form,p等
行級元素
與其他元素在同一行上，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不可以改變。
ps：em，strong，br,input等
display:inline-block，block，inline元素的區別
1、display：block將元素顯示為塊級元素，從而可以更好地操控元素的寬高，以及內外邊距，每一個塊級元素都是從新的一行開始。
2、display : inline將元素顯示為行內元素，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不可以改變。多個相鄰的行內元素排在同一行里，知道頁面一行排列不下，才會換新的一行。
3、display：inline-block看上去值名inline-block是一個混合產物，實際上確是如此，將元素顯示為行內塊狀元素，設置該屬性后，其他的行內塊級元素會排列在同一行。比如我們li元素一個inline-block，使其既有block的寬度高度特性，又有inline的同行特性，在同一行內有不同高度內容的元素時，通常要設置對齊方式如vertical-align: top;來使元素頂部對齊。
查看全部 -
float，此屬性在IE中用obj.style.styleFloat="left";
在ff等其他瀏覽器中用obj.style.cssFloat="left";
第三中兼容性寫法：obj.style['cssFloat' in obj.style?'cssFloat':'styleFloat']='left'；具體例子如下
查看全部 -
查看全部
-
讓IE7飆淚的浮動問題
含clear的浮動元素包裹不正確的問題
浮動元素倒數2個莫名垂直間距問題
浮動元素最后一個字符重復問題
浮動元素樓梯排列問題
浮動元素和文本不在同一行的問題（解決：左側左浮動，右側右浮動）
查看全部 -
文字環繞變身
float:left（左青龍）
float:right(右白虎）
text-align:center(中間是標題）
文字環繞衍生-單側固定
width+float(一側）
padding-left/margin-left（另一側）
DOM與顯示位置匹配的單側固定布局
width:100%+float
????padding-left/margin-left
width+float+margin負值
高級進化-智能自適應尺寸
float(一側）
display:table-cell IE8+(另一側）
display:inline-block IE7
查看全部 -
1.元素block塊狀化（磚頭化）
2.破壞性造成的緊密排列特性（去空格化）
nbsp（空格）看作字符
砌磚布局的問題
妙脆角-嘎吱脆（容錯性比較糟糕，容易出問題）
吝嗇鬼-重用廢（這種布局需要元素固定尺寸，很難重復使用）
洋蔥頭-IE7飆淚（在低版本的IE下會有很多問題）
盡量少用float砌磚頭
查看全部
舉報