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>脱离文档流这个就很简单了，略。浮动的注意事项不管怎么浮动也逃不出如来(父级)手掌心当前面的元素浮动后，后面没有浮动的元素尽量往左上角跑(往上钻)当前面的元素没有浮动，并且是块级元素就会把后面的浮动元素挡住(钻不动)浮动会出现文字环绕的效果在不脱离文档流的时候块级元素只设置一个height，默认宽度是父级的宽度。此时设置一个float脱离文档流后宽度就是0，如果该div里面没有任何文字内容的话，你会发现该div消失了内联元素脱离文档流后和块元素脱离文档流后效果一样后面的浮动元素不会超过他上面紧邻的浮动元素，如下图div1 div2左浮动，div3右浮动，发现div3并没有在div1的右边总结本讲要记的知识点非常多，注意脱离文档流后宽高的变化。容易混淆的是display:inline-block，效果几乎一样，但是display:inline-block并没有脱离文档流，并且元素中间有空隙。61-62讲 高度塌陷问题在文档流中，默认父元素不设置高度是被子元素撑开，当子元素脱离了文档流，父元素会出现高度塌陷的问题。由于父元素塌陷，父元素后面的元素也会跟着挤上来，导致页面布局发生了改变。解决方案一：给父元素设置高度，但是子元素高度变大后父元素不能自动跟着变大就会发生溢出。什么是BFC块级格式化上下文 (Block Fromatting Context),在页面的每个元素都有一个隐藏的属性叫做"BFC"，它默认是关闭的。当它开启后具有如下特性：父元素的垂直方向外边距不会和子元素外边距重合开启BFC的元素不会被浮动元素所覆盖(不会往里面钻)开启BFC的父元素可以包含浮动的子元素如何开启BFC设置元素浮动设置元素绝对定位设置元素为inline-block将元素的overflow设为一个非visible的值解决方案二给父元素开启BFC，上面的第4种方法是副作用最小的overflow:hidden或者overflow:autoIE6解决方案在IE6上面不知道BFC，但是与其对应的有个hasLayout，可以直接设置属性zoom:1来解决塌陷问题，zoom是把元素放大多少倍的意思。zoom:1一般没什么缺陷。最后设置为如下可以解决大部分浏览器高度塌陷问题：overflow:hidden;zoom:1;