# 浮動布局

## 一.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 {
    overflow: hidden;
}

④ 通過父級:after偽類
.sup:after {
    content: "";
    display: block;
    clear: both;
}

Python-浮動 清浮動