# 浮動布局## 一.display總結
```css
/* inline */
/*1.同行顯示, 就相當於純文字, 當一行顯示不下, 如就是乙個字顯示不下,那麼顯示不下的那乙個字就會自動換行,和純文字的區別就是有標籤整體的概念,標籤與標籤間有乙個空格的隔斷*/
/*2.支援部分css樣式, 不支援寬高 | 行高(行高會對映到父級block標籤) | margin上下*/
/*3.content由文字內容撐開*/
/*4.inline標籤只巢狀inline標籤*/
/* inline-block */
/*1.同行顯示, 當一行顯示不下, 標籤會作為乙個整體換行顯示*/
/*2.支援所有css樣式*/
/*3.content預設由文字()內容撐開,也可以自定義寬高, 當自定義寬高後,一定採用自定義寬高(顯示區域不足,內容會在標籤內容換行顯示,可能超出顯示區域)*/
/*4.inline-block標籤不建議巢狀任意標籤*/
/* block */
/*1.異行顯示, 不管自身區域多大, 都會獨佔一行*/
/*2.支援所有css樣式*/
/*3.width預設繼承父級,height由內容(文字,,子標籤)撐開, 當設定自定義寬高後,一定採用自定義寬高*/
/*4.block可以巢狀任意標籤*/
```## 二.overflow知識
```css
/* 本質 */
/*overflow: 處理內容超出盒子顯示區域*/
overflow: auto | scroll | hidden
/*auto: 自適應, 內容超出, 滾動顯示超出部分, 不超出則正常顯示*/
/*scroll: 一直採用滾動方式顯示*/
/*hidden: 隱藏超出盒子顯示範圍的內容*/
```## 三.浮動布局
```css
/*float: 浮動布局, 改變bfc的參照方位*/
/*為什麼要使用: 使用它, 塊級盒子就會同行顯示*/
``````css
float: left | right; 左 | 右 浮動
/*left: bfc參照方向從左向右*/
/*right: bfc參照方向從右向左*/
``````css
/*浮動的區域有父級的width決定*/
```## 四.清浮動
浮動問題: 子級浮動了,不再撐開父級的高度, 那麼父級如果擁有兄弟標籤,可能就會出現布局重疊問題
清浮動: 解決上面的問題, 通過使父級獲取乙個合適的高度, 這樣子級就不會和父級的兄弟布局發生重疊
clear: left | right | both
① 設定父級的死高度
② 通過兄弟設定 clear: both
③ 設定父級overflow屬性
.sup
④ 通過父級:after偽類
.sup:after
高階布局 浮動 清浮動
文件流 normal flow bfc block fromatting context 塊級格式化上下文,它是乙個獨立的渲染區域,只有block level box參與,它規定了內部的block level box如何布局,並且與這個區域外部毫不相干.bfc規則 1.內部的box會在垂直方向,乙個...
清浮動方法
1.加高 問題 擴充套件性不好 2.父級浮動 問題 頁面中所有元素都加浮動，margin左右自動失效 floats bad 3.inline block 清浮動方法 問題 margin左右自動失效 4.空標籤清浮動 問題 ie6 最小高度 19px 解決後ie6下還有2px偏差 5.br清浮動 問題...
浮動及清浮動的方式
浮動的特點 1.使塊元素在同一行顯示 2.使內嵌支援寬高 3.不設寬高則由內容撐開 4.脫離文件流，按照指定的乙個方向去移動，直到碰到父級的邊界或者另外乙個浮動元素停止 5.提公升層級半層，元素可以分為上下兩層，下層是具有樣式的元素本身，上層是元素裡的內容，浮動只浮動了半層。所以另乙個元素擠進來的時...