標準文件流：
指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列。這也是元素預設的排列方式
標準文件流組成
塊級元素（block）
…、、、列表
內聯元素（inline）設定不了寬高
、、、...
內聯標籤可以包含於塊級標籤中，成為它的子元素，而反過來則不成立
display屬性
值 說明
block 塊級元素的預設值，元素會被顯示為塊級元素，該元素前後會帶有換行符
inline 內聯元素的預設值。元素會被顯示為內聯元素，該元素前後沒有換行符
inline-block 行內塊元素，元素既具有內聯元素的特性，也具有塊元素的特性
none 設定元素不會被顯示
浮動float屬性
屬性值 說明
left 元素向左浮動
right 元素向右浮動
none 元素不浮動
清除浮動
clear屬性
值 說明
left 在左側不允許浮動元素
right 在右側不允許浮動元素
both 在左、右兩側不允許浮動元素
none 預設值。允許浮動元素出現在兩側
解決父級邊框塌陷的方法
浮動元素後面加空div
.clear
溢位處理
overflow屬性
屬性值 說明
visible 預設值。內容不會被修剪，會呈現在盒子之外
hidden 內容會被修剪，並且其餘內容是不可見的
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘內容
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容
清除浮動，防止父級邊框塌陷的四種方法
浮動元素後面加空div
簡單，空div會造成html**冗餘
設定父元素的高度
簡單，元素固定高會降低擴充套件性
父級新增overflow屬性
簡單，下拉列表框的場景不能用
父級新增偽類after
寫法比上面稍微複雜一點，但是沒有***，推薦使用
inline-block和float的區別
display:inline-block
可以讓元素排在一行，並且支援寬度和高度，**實現起來方便
位置方向不可控制，會解析空格
ie 6、ie 7上不支援
float
可以讓元素排在一行並且支援寬度和高度，可以決定排列方向
float 浮動以後元素脫離文件流，會對周圍元素產生影響，必須在它的父級上新增清除浮動的樣式
浮動及其應用
清除浮動 父級新增overflow屬性方法 浮動最早是用來控制，以便達到其他元素 特別是文字 實現 環繞 的效果。元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。在css中，通過float 漂浮 屬性來定義浮動，其基本語法格式如下 選擇器屬性值 描述left...
浮動 定位 以及其區別
浮動 元素的浮動是指設定了浮動屬性的元素會脫離標準普通 流的控制，移動到其父元素中指定位置的過程。語法 float left right none 預設 注意 1.浮動的元素要有父元素 2.浮動後的元素類似元素行內塊元素,即使行內元 素浮動後也可以設定寬高.類似不代表是,浮動後的盒子可以設定寬高，但...
浮動使用及清除浮動
浮動 讓元素脫離文件流，不受父盒子限制 浮動元素的寬高不會撐大父盒子 在父盒子無高度情況下 浮動元素不會遮蓋文字部分，文字會圍繞浮動元素 浮動目前功能 1.清除之間空白間隙 2.行級元素設寬高。使用場景多是寬高一致的元素整齊排列。清除浮動的方法 1.給浮動元素的父盒子加overflow hidden...