文档流：所有的内容都是占位的，正常情况下：     块元素：上下显示，独占一行     内联元素：水平排列，左右显示   浮动改变块元素的排列方式，让内容从上下排显示成水平显示。 同时了解float的属性值：     left 左浮动     right 右浮动     none 不浮动      注意：     浮动元素会脱离文档流，不占位，盒子重叠，内容不重叠；     如果想要内容都水平排列，需要所有的盒子都设置浮动     如果浮动的元素大于父元素的宽，显示不下就会另起一行，第二行显示     浮动不占位的副作用只会同级之间产生，浮动的副作用都是往下影响，不会影响上边的盒子        

  元素类型受浮动的影响 （不占位，脱离文档流） 块元素：     元素不设置宽，宽度是父元素的宽，如果设置浮动，块元素的宽度由内容撑开 内联元素     可以设置宽高     margin和padding可以设置四个方向     空格的间隙也能取消

  高度塌陷   首先要了解什么是高度塌陷，以及产生高度塌陷的原因:     如果父元素不设置高，或者设置最小高，高度由内容撑开，一旦内容浮动后哦不占位，就会出现高度塌陷，图下是由于没设置父元素的高度，高度由内容撑开，一旦发生浮动，就会产生塌陷现象：   解决高度塌陷的方法： 1.给父元素添加overflow:hidden（overflow可以触发BFC,关于BFC,可以理解为这是一个独立的渲染区域，在这个区域里面，浮动元素参与高度计算） 2.可以在浮动的下边设置一个空盒子，给空盒子清除浮动，把父元素撑开，需要注意的是，这个盒子必须是块元素，不是的话需要转换display:block； 3.万能清除法 .clearfix，这个用到了一种伪类,::after，该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构，在图框框里面设置的是为了防止在content里面添加内容，设置了默认高度为0，并将添加的内容隐藏起来，overflow:hidden与vsibility:hidden两者都是隐藏的作用，但两者不同的是一个不占位一个占位。 注意！ 最后一个方法要考虑版本的兼容性，解决版本兼容性可以设置属性zoom:1； （扩展：在IE6中没有BFC，但是有一个和BFC类似的hasLayout，在IE6中可以通过开启hasLayout来解决高度塌陷的问题，而开启这个haslayout的开启方式是设置zoom:1）