html排版原理-float

当只有float:left的时候

以前我经常认为设置了float属性的块节点将会成为内联节点，其实实际上不是这样，设置了float属性的节点就是会变得“透明”，比如块A、B、C，D；A是float:left，B是float:left，C没有设置float属性，D也没有设置float属性，那么排版出来的效果是

ABC

D

C并不会在独立的一行出现，但是依然要求后续节点D在所在行的下一行，这说明C忽视了AB的存在并认为第一行是空的。

再比如A、B、C、D、E；A是float:left，B是float:left，C是内联元素且没有设置float属性，D是float:left，E和C一样，排版效果是：

ABCE

D

C认为AB是透明的，第一行为空，所以在AB后面跟随，E认为AB和E是透明的，第一第二行为空，则在第一行C的后面跟随。

而带有float:left的元素总是尝试在跟随在float:left属性的节点后面，或者在新的一行首部。

 

当float:right和float:left结合的时候

即使有float:right的存在，float:left属性的节点的排版原则并不会改变；

内联节点依然会认为float:right也是透明的，比如A、B、C、D；A是float:left、B是float:right、C无float属性且内联、D是float:right，排版结果为：

AC                  B

                      D

C会认为AB所在行还是空行，所以在会在A和B之间，D只在行末或者在float:right属性节点的左边，因为不能在C的左边，只能选择新行的行末。我们可以这样理解某个float:right元素的排版原则：放在仅有float属性节点的一行或者空行。