CSS浮动

CSS浮动

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

左浮动

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

右浮动

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

CSS浮动
CSS浮动