浮动 高度塌陷问题 BFC

58-59讲 浮动

三个块级div水平方向排列：

不脱离文档流

display：inline-block可以把它们三个变为行内块元素,但是书写方式必须是这也每个div必须紧邻，中间不能留有空隙

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

下面这种垂直排列会留有空隙

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

脱离文档流

这个就很简单了，略。

浮动的注意事项

1. 不管怎么浮动也逃不出如来(父级)手掌心
2. 当前面的元素浮动后，后面没有浮动的元素尽量往左上角跑(往上钻)
3. 当前面的元素没有浮动，并且是块级元素就会把后面的浮动元素挡住(钻不动)
4. 浮动会出现文字环绕的效果
5. 在不脱离文档流的时候块级元素只设置一个height，默认宽度是父级的宽度。此时设置一个float脱离文档流后宽度就是0，如果该div里面没有任何文字内容的话，你会发现该div消失了
6. 内联元素脱离文档流后和块元素脱离文档流后效果一样
7. 后面的浮动元素不会超过他上面紧邻的浮动元素，如下图div1 div2左浮动，div3右浮动，发现div3并没有在div1的右边

总结

本讲要记的知识点非常多，注意脱离文档流后宽高的变化。容易混淆的是display:inline-block，效果几乎一样，但是display:inline-block并没有脱离文档流，并且元素中间有空隙。

61-62讲 高度塌陷问题

在文档流中，默认父元素不设置高度是被子元素撑开，当子元素脱离了文档流，父元素会出现高度塌陷的问题。由于父元素塌陷，父元素后面的元素也会跟着挤上来，导致页面布局发生了改变。

解决方案一：

给父元素设置高度，但是子元素高度变大后父元素不能自动跟着变大就会发生溢出。

什么是BFC

块级格式化上下文 (Block Fromatting Context),在页面的每个元素都有一个隐藏的属性叫做"BFC"，它默认是关闭的。当它开启后具有如下特性：

1. 父元素的垂直方向外边距不会和子元素外边距重合
2. 开启BFC的元素不会被浮动元素所覆盖(不会往里面钻)
3. 开启BFC的父元素可以包含浮动的子元素

如何开启BFC

1. 设置元素浮动
2. 设置元素绝对定位
3. 设置元素为inline-block
4. 将元素的overflow设为一个非visible的值

解决方案二

给父元素开启BFC，上面的第4种方法是副作用最小的overflow:hidden或者overflow:auto

IE6解决方案

在IE6上面不知道BFC，但是与其对应的有个hasLayout，可以直接设置属性zoom:1来解决塌陷问题，zoom是把元素放大多少倍的意思。zoom:1一般没什么缺陷。

最后

设置为如下可以解决大部分浏览器高度塌陷问题：

overflow:hidden;
zoom:1;