文档流，元素浮动，浮动元素的问题

什么是文档流

文档流也叫标准流，是网页中的一个位置，默认情况页面中的所有元素都在文档流中排列。

元素在文档流中的特点

块元素

• 自上向下排列，独占一行
• 默认宽度和父元素相同
• 默认高度被内容撑开

行内元素

• 自左向右水平排列
• 如果内容一行放不下，则会换行继续从左到右排列。
• 默认高度和宽度会被内容撑开

浮动

一般网页中采用块级元素来进行页面模块划分，每个块级元素都是独占一行的，可以使用浮动的方式将多个块级元素水平排列

设置元素浮动

使用 float 属性将元素设置为浮动
可选值：

• none 默认值 不浮动
• left 元素向左浮动
• right 元素向右浮动

浮动元素的特点：

• 设置浮动之后元素会向靠向容器的边缘（左或右）。
• 设置浮动之后，元素完全脱离文档流，不占据文档流位置，他下面的文档流元素会自动占据他的位置。
• 浮动元素不会超过其上面没有浮动的块元素
• 浮动元素由于父容器的宽度不够导致换行时，相对于它上面的其它浮动元素如果高度一致，则默认换行靠在父容器边缘，否则将与相对低的浮动元素垂直对齐排列。也可以说与相对高的浮动元素相并排列。
• 文字不会被浮动元素所覆盖，而是环绕再浮动元素的四周

元素脱离文档流的特点

• 默认宽度被内容撑开
• 默认高度被内容撑开
• 元素不会再文档流中占据位置
• 不在区分块元素和行内元素

浮动元素的问题 – 父元素高度坍塌

块元素没有设置高度的情况下，默认是被子元素所撑开的，如果子元素浮动，将会完全脱离文档流，脱离文档流子元素将无法撑开父元素高度，将会导致父元素失去高度，父元素高度一旦丢失页面的其他元素位置也会浮动，导致布局混乱

BFC

BFC（Block Format Context）块级格式化上下文。
元素默认有一个隐藏的BFC属性，如果开启这个属性就会生成一个独立布局的区域。
这个区域将会有一些特殊的性质：

1. 包含了内部所有元素的上下外边距，它们不会跟BFC盒子外面的元素产生外边距折叠。
2. 包含了内部所有浮动元素，这意味包裹浮动元素的父容器高度不会发生坍塌。
3. 不会跟BFC外面的浮动元素重叠，解决浮动元素被文字包裹的问题。

以下任意行为都将开启元素的BFC

• float的值不是none。
• overflow的值不是visible
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• position的值不是static或者relative。

通过如上方式来设置元素的BFC属性或多或少对元素本身有些隐患

clear属性

clear 用来清除浮动元素对当前元素的影响
可选值：

• none 默认值 不清除
• left 清除左边浮动对当前元素的影响
• right 清除右边浮动对当前元素的影响
• both 清除两侧中对当前元素影响最大的那一侧

clear实现原理：浏览器会根据浮动元素的高度将当前元素设置与之相等的垂直外边距，从而脱离浮动元素的覆盖区域

解决浮动元素问题的最终解决方案

既可以解决父元素包含浮动子元素高度坍塌还可以解决父子元素垂直外边距重叠问题。

一、解决父元素包含浮动子元素高度坍塌：设置父元素的伪元素：：after样式：

	content: '';
	display:block;
	clear:both;

二、解决父子元素相邻垂直外边距重叠：设置父元素的伪元素：：before样式：

	content: '';
	display:table;

为什么要使用display： table 属性？
清除浮动使用display:table 能包含外边距，是因为利用CSS的一些特性，创建一个display:talbe元素，也就是在元素内隐式创建了一个表格行和一个单元格。因为外边距无法通过单元格元素折叠，所以无法通过设置display:table的伪元素折叠那为什么不用display:table-cell呢？ 是因为clear属性只对块级元素生效，表格是块级元素，但是单元格不是。 因此celer属性无法跟display:table-cell 一起使用。所以要用display:table 来清除浮动的同时隐式的创建单元格来包含外边距。

三、两个样式组合：

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