CSS浮动

CSS浮动

众所周知，页面设计最重要的就是css的修饰，而css其中一个重要环节的就是块状元素的浮动。今天咱们就来简单说说浮动。
如下图一所示，该3块不同样式的块状元素从下而上依次排列，互不干扰。如果要让它并排显示的话，这就要用到我们的浮动了。
浮动——float ： left / right / none
左浮动 右浮动 没有浮动
注：一般情况下，float:none；不用写。
如图二所示的，框二与框三经过浮动并列了，而框一并没有浮动。这就说明了浮动属性可以多加，每个块状元素只要添加了浮动属性，就能并排显示；反之，没有并排显示的块状元素就是没加浮动属性的。

左浮动

左浮动——{float:left;}
如下图，框一和框二左浮动并排显示了，但是框三为什么也并到了一行了呢？这是因为元素添加浮动之后，就飘起来了，原本在标准文档流里额位置就不在占有了，后面的内容会把位置补上去。所以框一加框二宽250px,覆盖了260px的框三，只显示出来10px。

右浮动

右浮动——{float:right;}
如下图所示，框一没动，框三顶替了框二的位置，框二右浮动。