浮动与BFC

浮动

在容器不设置高度且子元素浮动时，容器高度不能被内容撑开，使内容跑到容器外面，影响布局，这种现象就是浮动。

浮动的工作原理

• 浮动元素会脱离文档流，不会占据空间（引起高度塌陷问题）
• 浮动元素碰到包含它的边框或其它浮动元素的边框时停留

浮动元素可以左右移动，直到遇到另一个浮动元素的边框或遇到包含它的边框后才会停留，浮动元素脱离了文档流，当元素浮动后，不会影响块级元素的布局，只会影响内联元素的布局。当包含浮动元素的容器高度小于浮动框时，会引起高度塌陷问题。

浮动元素引起的问题

1. 浮动元素的父元素高度无法被撑开，影响父元素的同级元素
2. 高度塌陷
3. 脱离文档流

清除浮动的方式

• overflow: hidden
• clear:left、clear:right、cleat:both
• 使用BFC

float

浮动元素是脱离文档流的，但不脱离文字流。

浮动元素的特点：

• 对于自身：

  1. 浮动元素可以形成块；可以让行内元素拥有宽和高
  2. 浮动元素尽量靠上
  3. 尽量靠左（float：left）或右（float：right）。如果那一行不能满足浮动元素的宽度要求，则元素会往下掉。

• 对于兄弟元素：

  1. 不会影响其它块级元素的位置
  2. 会影响其它块级元素的文本
  3. 上面紧贴非浮动元素、旁边紧贴浮动元素

• 对父元素影响：

  1. 从布局上“消失”
  2. 高度塌陷

BFC

BFC(块级格式化上下文)就是页面上一个隔离的独立容器，里面的子元素不会影响到外面的元素

BFC布局规则

• 内部盒子在垂直方向，一个接一个的放置
• Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
• 计算BFC的高度时，浮动元素也参与计算
• 每个Box的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化 ，否则相反）。即使存在浮动也是如此
• BFC的区域不会与float box重叠

如何创建BFC

• float的值不为none
• position的值为absolute或者fixed
• overflow的值为hidden、auto、scroll
• display的值为inline-block、table-cell、flex、table-caption、flex

BFC解决的问题

• margin重叠
• 高度塌陷
• 两栏布局

margin重叠

margin重叠就是两个块级元素的上下外边距会合并为一个外边距，这个外边距取值为两个元素上下外边距值较大的那个，重叠只会出现在垂直方向。浮动元素和绝对定位元素这种脱离文档流的元素的外边距不会重叠。