一.文档流
文档流指的是文档中的标签在排列时所占用的位置.将窗体自上而下分成一行一行,并且在每行中按从左至右的顺序排放标签,即为文档流.
简单来说就是标签在网页中的默认排放规则
二.浮动
当我们想要对网页进行布局,文档流就会相当麻烦,因为文档流中标签默认会紧贴到上一个标签的右边,如果右边不足以放下标签,标签则会另起一行,在新的一行中继续从左至右摆放,这样每一个块标签都会另起一行,此时我们布局就会相当麻烦.
因此,我们需要使用:浮动
浮动指的是使标签脱离原本的文档流,在父标签中浮动起来 .
浮动所使用的是;float属性
可选值:
none:不浮动
left:向左浮动
right:向右浮动
当一个块级标签浮动以后,宽度会默认是内容的宽度,所以当我们使用块级标签的时候,都会为它们指定一个宽度
当一个标签浮动以后,其下方的标签就会上移.
浮动会使标签完全脱离原本的文档流,也就是不再在文档中在占用位置标签浮动以后即完全脱离文 档流,这时不会再影响父标签的高度,也就是说,浮动标签不会再撑开父标签,所以如果有需要,我们应 为父标签设置宽高
清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化.
可选值:
left:忽略左侧浮动
right:忽略右侧浮动
both:忽略全部浮动
三.CSS定位 (position)
定位的基本思想很简单,它允许你定义的标签相对于其他正常位置,或者相对于父标签,另一个标签甚至浏览器窗口本身而出现的位置.
接下来是三中定位方式;
1.相对定位(relative)[未脱离原本的文档流]
相对于起点进行移动,移动后原来的位置还被占用.
通过position:relative开启定位,然后使用属性:
left,right,top等属性进行定位(填写需要向各个方位移动的像素数)
2.绝对定位(absolute)
不会占用原本的空间,会脱离原本的文档流
通过position:absolute开启定位,然后使用属性:
left,right,top等属性进行定位,不过与相对定位不同的是,此时参照物发生了变化:是离他最近的,开启了定位的父级标签,如果所有的父级标签都没有开启定位,那么就以浏览器为参照(最好不以浏览器为参照)
一般情况下,若给标签开启绝对定位,一般会给其父级标签开启相对定位
3.固定定位(fixed)
使用position:fixed开启定位,使用left,right等属性设置位置,其余事项与前两种定位方式基本相同.
标签：浮动,定位,right,标签,文档,css,CSS,left From： https://blog.csdn.net/wzc3180043380/article/details/143667268