CSS2理解-float篇

FLOAT概述

        浮动原本是为了实现图片环绕的效果，现在常用来实现布局。浮动元素的只能沿水平方向浮动，不能沿着垂直方向浮动。元素浮动后脱离原有的文档流，直到遇到边框和其它浮动框为止，浮动元素之后的其后的元素将围绕它，并占据浮动元素腾出的位置，直到遇到边框为止。浮动会对浮动之后的元素产生影响，但对浮动之前的元素无影响。

浮动效果1，文字环绕，图片环绕

由上图可以看出浮动实现了文字环绕了首字母和图片，首字母之后的元素均受到了影响，但对其之前的元素无影响。

2. 浮动后元素脱离文档流

其后的元素占据原有浮动元素的文档流。浮动元素可能会覆盖其后面的元素，如下图所示

浮动前：

浮动后：

蓝色的元素占据红色元素浮动前的位置，红色的元素覆盖了蓝色的元素的部分内容。

3. 浮动后，父类元素会高度塌陷

由于父元素设置了高度，则子元素浮动后父类元素高度不变

父类元素未设置高度，子元素浮动后，父元素的高度由原有子元素占据的高度变为去除子元素高度后的高度

其中父元素的高度由原来的50+50=100px变为了去除浮动后的100px -50px = 50px了。如果父元素只包含浮动的子元素，则会造成子元素浮动后的父元素高度为0，所以即使此时父元素的宽度比子元素宽，但由于高度为0，所以此时设置的背景色也无法被显示出来，这就是所谓的高度塌陷。

4. 浮动常用来布局，例如两栏布局中，将两栏均向左或者向右浮动。如果其中有一栏定宽，则另外一栏的宽度由其下的内容决定。也可以两个栏目均占据一定比例的宽度。