浮动布局

浮动

是一种传统的网页的布局方式
通过浮动可以使得元素脱离文档流而横向排列
float
- 设置元素浮动
- 可选值：
  - none 默认值元素不浮动
  - left 向左浮动
  - right 向右浮动
- 浮动的特点：
  1. 设置浮动后，元素会脱离文档流，其后的元素会自动上移
  2. 设置浮动后，元素会向其包含块的左侧或右侧移动
  3. 如果一行之内无法容纳所有的浮动元素，则后边的元素会自动换到下一行
  4. 浮动元素不会超过它上边浮动的兄第元素，最多一边齐
  5. 浮动元素不会盖住文字，文字会环绕在浮动元素的周围
浮动后，之前的布局等式就失效了

脱离文档流

元素脱离文档流后的特点：
- 块元素：
  1. 块元素不再独占一行，而是水平排列
  2. 宽度和高度都被内容撑开
- 行内元素：
  - 设置浮动行内元素可以设置宽度和高度
- 总结：脱离文档流后，块元素不再独占一行，宽高被内容撑开，行内元素变成块元素，脱离文档流后，就不再需要区分行内和块

BFC

在文档流中的元素，可以将其它元素的高度撑开！当元素浮动，它会脱离文档流，脱离文档流后，无法撑开父元素的高度，导致父元素高度塌陷
父元素高度塌陷，其后的元素会自动上移，导致布局变得混乱
高度塌陷是我们使用浮动布局时必须要解决的问题！
如何解决该问题
- 1.可以直接将父元素的高度写死，这样一来父元素高度写死，无法根据子元素高度的变化而变化
解决方案
- BFC(Block Formatting Context)
  - 块级格式化环境
  - 可以将BFC理解为一个隐藏的属性，当开启BFC后元素会具备如下的特征：
    1. 开启BFC后，子元素的垂直外边距不会传递给父元素
    2. 开启BFC后，元素不会被浮动元素所覆盖
    3. 开启BFC后，元素可以包含浮动的子元素
  - 如何开启BFC:
    - 需要用一些其他的样式来简介开启BFC
    - 由于BFC是通过一些样式间接开启的，所以都会有一些副作用，而我们要做的是找到一种可以开启，同时副作用有比较小的
    - 例如：
      1. 浮动会开启元素的BFC
      2. 将overflow设置为一个非visible的值
      3. display:flow-root
  - 开启BFC后
    1. 子元素的垂直外边距不会传递给父元素
    2. 元素不会被浮动元素所覆盖
    3. 元素可以包含浮动的子元素

clear

清除浮动元素对当前元素所产生的影响
可选值：
- left 清除左侧浮动元素对当前元素的影响
- right 清除右侧浮动元素对当前元素的影响
- both 清除最大一侧浮动元素对当前元素的影响

.clearfix::after
{
    content: "";
    display: block;
    clear: both;
}

.clearfix::before{
    content: "";
    display: table;
}

.clearfix::before,
.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

浮动布局

浮动​

脱离文档流​

BFC​

clear​

浮动

脱离文档流

BFC

clear