css float2

为何需要float？

思考如何使两个块级元素处于同一行，块级元素默认是会换行的。比如div元素

11111
2222

结果如图

image.png

添加一个float属性

11111
2222

结果

image.png

如果是给第二个div添加float呢？

11111
2222

结果如下

image.png

再看例子

11111
2222

结果如下

image.png

总结一下，就是float使元素漂浮到最左边或者最右边，然后后来的元素会补上其留下来的空白。

如何不让后来的元素递补空白？

11111
2222

添加clear属性之后，结果

image.png

尽管第一个div已经float:left了，这两个div仍然在两行上，就是由于第二个div不让它左边有float
因为css的定义是后面的可以覆盖前面的。
CSS中，float浮动的理解 - guomutian911的专栏 - 博客频道 - CSDN.NET

总结

CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。关于块元素和内联元素可以参考这里。
　　
其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧，关于float属性的详细说明可以参考这里。