css-浮动

Css样式的float浮动属性，用于设置标签对的浮动布局

一、标准文档流

宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。我们来看看标准流有哪些微观现象。

1、空白折叠现象

无论多少个空格、换行、tab，都会折叠为一个空格。比如，如果我们想让img标签之间没有空隙，必须紧密连接：

2、高矮不齐，底边对齐

3、自动换行，一行写不满，换行写

二、浮动设置

浮动（float）让元素脱离正常流，向父容器的左边或右边移动直到碰到包含容器的边或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。设置浮动的格式如下

float:left|right

1、碰到容器的边指的是容器的padding内边

2、浮动元素脱离正常流，意思是布局时后面元素当它不存在（文字还是当它存在，环绕其身边）

下面看几个实例，进一步了解浮动的特性


由此可知：放一个盒子浮动后，其位置将会被正常文档流的其他元素所占据

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”