7、float浮动

一、float浮动

（1）网页布局的本质---用CSS来摆放盒子。把盒子摆放在相应的位置。

文档流（标准流）：是文档中可显示对象在排列时所占用的位置；（线性排列、横向排列：从上到下、从左到右）标签按照规定好的默认方式排列；最基本的布局方式。

1.块级元素：会独占一行，从上向下顺序排列；可以直接设置宽高；可以嵌套块级与行内元素；

2.行内元素：行内与其他元素共享一行，会按照顺序，从左到右顺序排列，超过父元素的宽度后则自动换行；不能直接设置宽高，需要结合CSS的display设置；行内元素只能包含行内元素，但是也能够设置

在布局中，标准流无法达到很多令人满意的布局效果，例如使用行内块元素进行排列，元素之间会有间隙。而浮动可以改变元素标签默认的排列方式，利用浮动可以让多个块级元素一行内排列显示完成布局，调整元素之间的间隙距离。

    （多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。）

（2）float特性

1.，加了浮动的元素，会脱离文档流，将其移动到一边沿着父容器靠左或靠右（会反向）排列，没有间隙，也可以调整到指定的位置；

2.如果之前已经有浮动的元素，会挨着浮动的元素在一行内进行排列，并且元素顶部对齐；

3.浮动的元素不论是块级元素或是行内元素，都会具有行内块元素的特性；可以指定高度和宽度。

4. 浮动的元素不再保留原先的位置，父容器的容量不受影响；（一般会搭配父元素一起使用）

（3）float的取值：

选择器    {     float：left/right/none（默认）；    }

（4）元素浮动的位置

1.利用标准流的父元素（设置宽高）排列上下位置，再对子元素采取浮动排列左右位置；（对子元素进行样式修改的时候，要注意和父元素样式指定之间的权重问题）；

2.父元素中有多个子元素，理论上其中一个子元素浮动了，那么它的兄弟元素也应该设置浮动，避免位置发生错乱；

（5）总结float的注意点

1.只会影响后面的元素，对于浮动之前的元素不会有影响；

2.内容默认提升半层，文字不会被浮动的元素覆盖，会因为位置被抢占而挤到一旁，可利用特性进行图文混排效果；

3.没有设置浮动前，块级元素的默认宽度和父级一样宽；但是设置浮动后，默认宽度会依内容决定或是指定宽度；

4.会依据父元素的宽度换行排列：当内部元素的内容宽度大于父元素的宽度时默认换行。注意换行后的排序；

5. 针对块元素使用时，主要是调整块元素所占据的位置；针对内联元素使用时，主要是调整内联元素的宽高。