No.001 文档流与浮动与高度塌陷

（以下所有内容仅用以记录学习过程中的个人理解，如有错误欢迎指出）

1. 文档流 Normal flow

将显示屏幕想象成一个水池，各种元素沉积在文档流的水池中，用户自上往下看到的就是网页的布局。

其中块级元素在文档流中自上而下一行一行排布，行内元素自上而下从左至右排布。

2. 浮动 Float

给元素A设置浮动float之后，A就会脱离文档流。将A想象成一个实心盒子，设置float之后变成了空心盒子，即A从文档流的水底浮到了水面上。

此时原本在水底排在A之后的众多元素，由于A浮上水面空出了位置，将会一同往上移，看上去即是所谓的“重叠”。

A浮动之后，会尽量往页面的左上或者右上移动，但是无法超出/重叠：

1. A的父元素A_par的内容区，可以想象成父元素A_par内容区的四条边框伸出水面，形成了一个供A浮动的“泳池”（高度塌陷为特殊情况）；
2. 其他浮动的元素，都浮在同一水面，无法重叠；
3. 代码层面在A前面的非浮动块级元素；
4. 代码层面在A前面的兄弟元素。

3. 高度塌陷

在不设置父元素A_par的高度的情况下，A_par的高度默认是由子元素A撑开的。但当A设置浮动float之后，A浮上水面，A_par的高度无法被撑开，即形成“高度塌陷”。

解决这一问题，可以直接设定A_par的高度，但这样就无法在后期自动地适应其中子元素的高度要求——方法1，pass。

3.1 方式一：隐含属性块格式化上下文BFC

根据W3C的标准，页面有一个隐含属性BFC（Block Formatting Context），默认关闭。

开启BFC之后，元素将具有以下特性：

1. 不会被浮动元素所覆盖；
2. 可以包含浮动的子元素。

BFC的开启方法有：

1. 设置元素浮动：
   可以撑开父元素；
   会导致父元素宽度丢失，会导致下边元素上移。——方法2，pass。
2. 设置元素绝对定位（基本同上）：——方法3，pass。
3. 设置元素为inline-block：
   可以撑开父元素，下边元素不会上移；
   会导致父元素宽度丢失。——方法4，pass。
4. 将元素的overflow设置为非visible值，即aotu或hidden（为了隐藏滚动条）：
   副作用最小的方式。——方法5，ok。

IE6及以下的浏览器的情况

IE6没有BFC，但有另一个隐含属性hasLayout，作用与BFC类似。

IE6开启hasLayout的方法：

1. 为元素设置宽度；
2. 为元素设置zoom。

IE6浏览器解决高度塌陷问题：设置“zoom: 1;”。（zoom表示放大元素，设置数值为几就放大几倍）

由上可知，为适配并解决所有浏览器的高度塌陷问题，一般在父元素A_par的CSS样式表中加上：

zoom:1;
overflow: hidden;

3.2 方式二：设置clear

clear：规定当前设置元素哪一侧不允许其他浮动元素，用以清除其他浮动元素对当前元素的影响。可设置值：

1. none：默认，不清除；
2. left：清除左边浮动元素的影响；
3. right：清除右边浮动元素的影响；
4. both：清除左右对其影响最大的一侧的浮动元素的影响。

基于此来解决高度塌陷问题的方法如下。

在高度塌陷的父元素A_par的最后，添加一个空白div块，对其设置clear清除浮动，用以撑开A_par的高度。

.clear{
	clear: both;
}

<div class="box1">
	<div class="box2"></div>
	<div class="clear"></div>
</div>

但这会添加多余的div块结构。——方法6，pass。

此时可以通过 :after 伪元素选中A_par的最后，添加一个空白块元素，对其设置clear清除浮动，用以撑开A_par的高度。

.clearfix:after{
	content: ""; //添加空内容
	display: block; //转换为块元素
	clear: both; //清除浮动
}

<div class="box1 clearfix">
	<div class="box2"></div>
</div>

该方法几乎没有副作用。——方法7，ok。

IE6及以下的浏览器的情况

IE6不支持:after伪元素，依旧使用zoom来解决高度塌陷。