css浮动属性
css浮动属性
1:浮动:顾名思义就是让元素漂浮起来。且从我们的视角看去页面并没有发生任何变化。如图所示:
该图为一个网页,我们直面看上去,是看不出页面上是否有浮动的。但当我们从侧面看上去时,浮动就很明显了。
如图所示:很明显的就能看出网页部分1,网页部分2是不浮动的,他们两处在同一个平面上。而网页部分3明显浮动于网页上方,但是从我们的视角去看却并没有变化。
2:浮动属性的书写方式: float: ;它具有三种属性值书写方式分别为:
float:left; 左浮动
float:right; 右浮动
Float:none; 没有浮动
3:浮动属性的作用:在文档流中块状元素是自上而下的显示顺序,内联元素是自左而右的显示顺序。而在网页中需要让一些上下排列的元素变成左右的排列顺序,这就需要用到浮动属性。
作用:让上下排列的元素可以并排显示。左浮动会使浮起来的元素自左向右排列为一排,右浮动会使浮起来的元素自右向左依次排列为一排。如果有N个元素要在一排并列显示,那么N个元素都需要添加浮动属性。且添加浮动属性后,元素对margin:0 auto;不生效。
4:浮动显示规则:元素添加浮动之后,就漂浮起来了,原本在标准文档流利的位置就不再占有了,后面的内容会把位置补上去,漂浮起来的元素会遮挡部分补上的元素。但是文字是不会被遮挡的,这就形成了文字环绕的模式。如下图所示:
浮动对象会向左或者向右移动遇到边框(border),填充(padding),外边界(margin)或者另一块元素为止。
当上一块元素漂浮起来时,会使下一个元素顶上原来的位置,会致使下个元素被遮挡,这时就需要为下个元素添加清除浮动属性,以防止其受到影响。清除浮动属性书写方式:clear: ;其有四个属性值,分别为:none:不清除
left:清除左浮动
right:清除右浮动
both:清除两侧浮动
注:清除浮动属性,只针对于自身起作用,对其他元素是没有影响的。且清除浮动属性,不是给浮动的元素加的,而是给受了浮动影响的元素加的。