浮动 高度塌陷

Posted 2020-10-02

## 浮动
- 使用float设置元素浮动
- 可选值
    - none 默认值. 元素不浮动
    - left 元素向左浮动
    - right 元素向右浮动
- 浮动的特点:
    - 当元素设置浮动后,元素会向页面左上或右上浮动
    - 当浮动元素遇到父元素边框后, 会停止浮动
    - 当浮动元素遇到其他浮动元素时,会停止浮动
    - 如果浮动元素上是一个没有浮动的块元素,浮动元素不会超过它
    - 浮动元素不会超过它上边浮动的兄弟元素
    - 浮动元素不会覆盖文字. 文字会环绕在浮动元素周围
    - **浮动元素会完全脱离文档流**  
- 元素脱离文档流后的特点:
    - 内联元素: 会变成块元素.独占一行并且可设置宽高
    - 块元素: 不再独占一行并且宽和高都会被内容撑开 
- clear 清除浮动
    - left 在左侧不允许浮动元素
    - right 在右侧不允许浮动元素
    - both 左右两侧均不允许浮动元素

 
## 高度塌陷
- 默认情况下父元素的高度被子元素撑开. 如果子元素开启浮动脱离文档流则无法撑起元素高度.导致高度塌陷
- 解决方式
    - 开启父元素的BFC
    - 为父元素添加after伪元素
        - 添加content:""
        - 设置伪元素 display:block
        - 清除浮动 clear:both
- BFC开启后的特性
    - 元素不会被浮动元素覆盖
    - 子元素的垂直外边距不会传递给父元素
    - **元素可以包含浮动的子元素**  
- 开启BFC方式
    1. 设置元素浮动 
    2. 设置元素的dispaly:inlineblock
    3. 设置元素的绝对定位
    4. **设置元素的overflow:hidden**