Appearance
浮动
让元素脱离标准流，以达到灵活布局的效果（类似 fixed）
float
- none：不浮动，默认值
- left：向左浮动
- right：向右浮动
规则
- 向左浮动或者向右浮动
- 向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元 素的边界为止
- 定位元素会层叠在浮动元素上面
- 不能超出包含块
- 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
- 浮动元素不能层叠
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个 浮动元素（左浮找左浮，右浮找右浮）
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间 为止
- 浮动元素会将行内级元素内容推出
- 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
- 比如行内级元素、inline-block 元素、块级元素的文字内容
- 图文环绕效果
- 浮动只能左右浮动, 不能超出本行的高度
- 行内级元素、inline-block 元素浮动后，其顶部将与所在行的顶部对齐
清楚行内块的间距，比如 两个 span 之间会有一点间距
- 删除换行符(不推荐)
- 将父级元素的 font-size 设置为 0, 但是需要子元素设置回来
- 通过子元素(span)统一向一个方向浮动即可
- flex 布局
清除浮动
给父元素设置固定高度 -扩展性不好（不推荐）
在父元素最后增加一个空的块级子元素，并且让它设置 clear: both
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则（不推荐）
给父元素添加一个伪元素
- 给父元素增加::after 伪元素，纯 CSS 样式解决，结构与样式分离（推荐）
.clear_fix::after { content: ""; clear: both; display: block; /* 浏览器兼容 */ visibility: hidden; height: 0; } .clear_fix { /* IE6/7 */ *zoom: 1; }
BFC的区域不会与浮动容器发生重叠（BFC 下面有解释）
解决浮动重叠，实现自适应两栏效果，使 .right 成为 BFC 区域即可
BFC
BFC：（Block Formatting Context） 块级格式化上下文
特性
- 属于同一个
BFC的两个相邻容器的上下 margin 可能会重叠 (那把它弄成两个 BFC 不 就行了) - 计算
BFC高度时浮动元素也会被计算 - BFC 的区域不会与浮动容器发生重叠
- 所有属于 BFC 中的盒子默认左对齐，并且它们的左边距可以触及到容器的左边线。最后 一个盒子，尽管是浮动的，但依然遵循这个原则
- BFC 是独立容器，容器内部元素不会影响容器外部元素
如何生成 BFC
- 根元素（html）,或包含 body 的元素
- 设置浮动（float），且值不为 none（为 left、right），
- 设置定位（position）, 不为 static 或 relative（为 absolute 、 fixed）
- 设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption
- 设置 overflow(常用)，且值不为 visible (为 auto、scroll、hidden)
使用 BFC 特性解决问题
解决外边距的塌陷问题
当两个盒子设置 100 的外边距，会发现应该 200px 的外边距发生了塌陷，margin 重叠只 有 100px
将两个盒子放在不同的 BFC 中即可解决
- 使用
overflow：hidden或display：inline-block让其成为 BFC
解决浮动重叠问题
.left 设置了浮动，导致 .right 与之重叠
解决浮动重叠，实现自适应两栏效果，使 .right 成为 BFC 区域即可