自学前端第十七天:CSS浮动float定位

学习浮动(float)

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

1.标准文档流(normal flow)

这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。

前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

2.浮动(芜湖起飞,但不能随便飞,要按飞行轨道飞)

3.定位(想飞去哪就飞去哪,无敌!)

强调!!!浮动的最本质的目的：就是为了让多个块级元素像inline-block一样可以同一行上显示。 最核心的关键点就是 :怎么排列的， 是否占有位置.

一.那么浮动(float) VS 行内块inline-block 区别？

一.float和inline-block区别1:都可以让图片和文字一起显示,但是有区别

1.inline-block让图片和文字一行显示 （但是:图文之间是互相是不影响各自的空间的,如下图）

.2.而float可以浮动让图片起飞然后镶嵌到文字中，以便达到其他元素（特别是文字）实现文字“环绕”图片的效果。
(缺点:只有左上角,右上角,没有像上述图片那样在中间)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7OlqvYf8-1620061897526)(C:\Users\tuyue\AppData\Local\Temp\1611995886954.png)]

PS注意:如果再次在图片上面修改margin -top,是不会让文字继续嵌套进去上面环绕的,只会流出空白
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wq8pWJEQ-1620061897537)(C:\Users\tuyue\AppData\Local\Temp\1611996273445.png)]

二.float和inline-block区别2:

float和inline-block浮动都可以让多个块元素盒子在一行上显示(但有区别)

1.float让多个块元素在一行上显示: (推荐,比inline-block好很多)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pFvCjhIB-1620061897541)(C:\Users\tuyue\AppData\Local\Temp\1611996750329.png)]

PS:下面五个案例总结浮动流能一起并排的原理!!)

浮动流特性:浮动流不能占前方文档流位置,而 文档流可以占前方浮动流位置.

①如果不是整体float,只给比如第一个红色盒子单独float浮动的话,就会出现红盒子覆盖绿盒子现象:
(这说明红盒子自己单独起飞飘起来脱离了文档流,然后独占两行绿和蓝盒子还是得遵循文档流规则自上而下排
就会往前顶,并占了红盒子位置,接着红盒子就会覆盖占了它位置的绿盒子上面去了.但实际绿盒子没有丢,只是上帝视角去看.)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGNKTJcS-1620061897547)(C:\Users\tuyue\AppData\Local\Temp\1611999251562.png)]

②(由上述总结测试一下你,如果只是给第二个绿盒子单独float,就会出现绿盒子单独飘起来脱离文档流,
那么**飞起来绿盒子为什么不会往前飘?**而是先原地发呆,因为:浮动流前面如果有文档流的时候是不会进位覆盖的,
怕前面的文档流红盒子突然也脱离文档流起飞,就会撞上追尾) ,而蓝盒子还是文档流就会往前占了绿盒子位置,因此就出现了绿盒子覆盖蓝盒子现象.)

③(因此如果只是给第三个蓝盒子单独float,就会出现蓝盒子单独飘起来脱离文档流,)
此时,由于前面有两个文档流,因此蓝盒子浮动流也不能进位,而后面又没有文档流前进占蓝盒子浮动流位置
因此,蓝盒子就跟没变化一样,原地发呆了… (但实际也是飘起来的,只是上帝视角)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HbDoScR0-1620061897551)(C:\Users\tuyue\AppData\Local\Temp\1612001205397.png)]

④如果是两个一起飞,即绿和蓝盒子一起float,而红盒子还是文档流时
就会出现双飞一起发呆现象,因为前面是红盒子文档流,还是不能进位,就两个使用浮动属性的就会一行并排发呆

⑤所以说,三个盒子一起浮动float的时候,如果前面是文档流小盒子或者文档流父级大盒子墙壁则不能进位
就会变为三个盒子一起并排,就实现了行内块元素一样的功能一行并排等待吧.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pNlHxsRR-1620061897557)(C:\Users\tuyue\AppData\Local\Temp\1612002670280.png)]

PS:注意浮动也会和inline-block一样,一旦超出父盒子宽度都会被挤下去下一行显示.(下面会仔细讲解)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWkzXtkU-1620061897562)(C:\Users\tuyue\AppData\Local\Temp\1612003181236.png)]

2.不用float,而用inline-block让多个块元素在一行上显示:
(inline-block三宗罪:①低版本ie不支持 ②会有空白换行符间隙 ③清除间隙时会有bug)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NMRorPIk-1620061897566)(C:\Users\tuyue\AppData\Local\Temp\1611996856121.png)]

PS:因为变为行内块元素之后,会遗留问题,就是会留有空白间隙,是每一个div块元素的遗留的换行符.
因为一个换行符也算占一个字节数大小,
因此解决办法就是:清除body的原来的字大小即可 或者 使用邪道写法:margin:负值拉近盒子距离.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w3puSYp6-1620061897568)(C:\Users\tuyue\AppData\Local\Temp\1611997081672.png)]

PS2:而会有bug,一旦你在盒子写文字过长,会无法看到,并且会单独挤下一行去.
(建议不使用行内块,清除间隙时会出现bug)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sqF8nylZ-1620061897571)(C:\Users\tuyue\AppData\Local\Temp\1611997341416.png)]

三.float和inline-block区别3:都是一旦超出父盒子宽度都会被挤下去下一行显示:

1.所有红蓝绿盒子都浮动起来了,但是为什么蓝色盒子却被挤下来了?因为在一行并排时也要遵循一个原则,子盒子总宽度就是不能超过父盒子,否则不管是浮动还是行内块就不能在一行上同时显示,多余会被整体挤下去下一行,这和地面上使用inline-block是一样规则的.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Vv8nsN9-1620061897574)(C:\Users\tuyue\AppData\Local\Temp\1612003181236.png)]

2.升级下面的思考题:
①下面为什么设置给图片浮动之后父容器塌陷之后,p段仍不能不能鸠占鹊巢上位呢,为什么?
(原因:很简单,银色的父容器高度没有塌陷,下面的父容器已经提前设置好高度了,不会塌陷,父容器还是文档流,不能被p文档流鸠占鹊巢)

②那么问题又来了?
那我给p段也浮动不就能去图片隔壁了么,也不能因为:图片和文字都是在同一个父盒子中的,因此父盒子设置的宽度容不下,图片+文字的宽度,因此就会被挤去下一行.

③这里解决办法就只能使用CSS定位才能让p段去图片的任何位置:去看CSS定位可以实现!!!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xOs0X4X2-1620061897576)(C:\Users\tuyue\AppData\Local\Temp\1612182177601.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oMOuVvQ7-1620061897577)(C:\Users\tuyue\AppData\Local\Temp\1612165837529.png)]

除非让文字去到盒子外面,并且父级盒子高度塌陷(即取消设置好的高度)就可以去上位了:
(太麻烦了,还不如让图片和文字段一起左浮动,并排一行显示不香么???)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LRER6d1n-1620061897581)(C:\Users\tuyue\AppData\Local\Temp\1612182467407.png)]

四.总结进位—鸠占鹊巢上位的反例坑:

提前:不管是行内元素sapn还是p块元素还是img置换元素,只要浮动就都是显示为block块元素,因此什么元素在浮动之后都能设置宽高了,变为block了.

反例踩坑1：下面这里为什么父容器不塌陷(已经使用after伪元素解决了)，但p段仍然能上位和去隔壁?
**原因:**因为红蓝盒子是在同一个clearfix父容器,问题就出在这里,因此这里不关父容器塌不塌陷的问题，而是同一盒子内部的子元素之间的问题 , sapn使用了浮动就会变为块元素盒子然后飘起来,虽然设置了90px高度但也没用,还是会让自身高度塌陷(这种自身高度塌陷,让文档流进位浮动流的规则无法改变的), 因此让p红盒子文档流自动进位浮动流所处的位置的，

即这里是同一父容器下,span子盒子浮动了让自身高度塌陷了,让p红子盒子去进位了.
(这里有个细节就是,文档流p红盒子文字竟然不在左上角被覆盖???,而是会突出来,文档流进位浮动流时,文字不会进位,一定会凸出来,如果没限制p宽度,则文字往右凸出来,如果限制宽度则文字往下面凸出来,下下图有)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fTU4LdPg-1620061897583)(C:\Users\tuyue\AppData\Local\Temp\1612170642450.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVtu1jFP-1620061897584)(C:\Users\tuyue\AppData\Local\Temp\1612673602128.png)]

!!!清除浮动如何解决高度塌陷,让浮动流元素和文档流元素可以换行显示:**

解决①不让父盒子容器高度塌陷:
让红蓝盒子不在同一个父级容器了即可, 分开了父级容器,而给span浮动流盒子的父容器加个clearfix类,就能清除父容器高度塌陷问题, 让父容器能检测出子盒子在文档流的高度,从而不让其他红盒子文档流进位.
(此方法适合不在同一父容器下,让浮动流子盒子能和下面文档流分行显示)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5YbxGTsR-1620061897586)(C:\Users\tuyue\AppData\Local\Temp\1612177392005.png)]

解决②不让自身盒子容器高度塌陷:
想让红蓝盒子在同一个父级容器也行, 把cleafix清除浮动div插入在红蓝盒子中间,解决了蓝盒子自身高度塌陷问题
(此方法适合同一父容器下,让蓝色浮动流盒子占位置,不让红色盒子文档流进位,让两者能分行显示)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aco1WwzJ-1620061897587)(C:\Users\tuyue\AppData\Local\Temp\1612674128565.png)]

反例踩坑2：这里改变位置,红蓝子元素不在同一父容器中，为什么p还能上位？
原因：蓝span元素的父容器没有设置高度又没有解决父级容器高度塌陷问题，因此当蓝span元素全部浮动起来时，这里就是真正的父级容器塌陷了，红盒子作为蓝色元素父盒子下的同级块元素，就会鸠占鹊巢，当父盒子高度塌陷时乘机而入直接上位占领。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjXgfRvG-1620061897590)(C:\Users\tuyue\AppData\Local\Temp\1612170856157.png)]

反例踩坑3：红蓝子元素不在同一父容器中，并且也用overflow解决了高度塌陷问题,为什么p还能上位？
原因：因为这里已经不是上位问题了,而是红蓝元素一起手牵手的问题了,你看红盒子宽度明显变小了,因为压根不是红盒子上位了,而是红p盒子也和蓝span一样一起float浮动了,变为同伙了,就会一行并排一起等待,

因此看清楚这里不是被鸠占鹊巢进位了 , 而是并排浮动, 并排浮动时的块级盒子的宽度会变为自适应,即文本多宽而设置宽度.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S4G9RoGH-1620061897591)(C:\Users\tuyue\AppData\Local\Temp\1612171354489.png)]

反例踩坑4：为什么这里和反例3一样的做法:即红蓝子元素已经不在同一父容器中，并且也用after伪元素解决了高度塌陷问题,为什么p反而不能上位了??

原因: 找不同,反例4和反例3上面条件还是有不同的,一个用overflow一个用after.伪元素解决蓝盒子的父容器高度塌陷问题.
问题就恰恰出在这里.
因为插入了clear:after伪元素div标签,但是却插错了,插错在左右浮动盒子的中间
after伪元素div标签虽然没有任何宽高,但是它也是作为一个虚拟div文档流也是独占一行存在于左右两个蓝红盒子中间的,因此div文档流就卡住了后面的浮动右盒子,因为浮动流不能进位中间的div文档流,文档流就会自己独占一行,把红蓝盒子无形间接上下隔开了,就出现了一上一下的错误结构,
而红盒子仍然是浮动的效果不会消失,只是就要去div文档流后面浮动排队了,
(具体去看结尾的清除浮动时的注意点:会细讲!!!)
错误案例:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IO3UDdie-1620061897593)(C:\Users\tuyue\AppData\Local\Temp\1612171050391.png)]

如何解决:①把sapn和p两个元素放在同一个盒子中,这样伪元素就不会插错位置了,插在两个浮动盒子后面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IWITkJVX-1620061897595)(C:\Users\tuyue\AppData\Local\Temp\1612173524316.png)]

②如果实在不想在同一个盒子中,那就在两个元素外面套个一样父级盒子,让两个浮动元素在同一个父盒子中,再使用overflow:hidden即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fyW2u1Vn-1620061897599)(C:\Users\tuyue\AppData\Local\Temp\1612171354489.png)]

反例踩坑5：所有红蓝绿盒子都浮动起来了,但是为什么蓝色盒子却被挤下来了?因为在一行并排时也要遵循一个原则,子盒子总宽度就是不能超过父盒子,否则不管是浮动还是行内块就不能在一行上同时显示,多余会被整体挤下去下一行,这和地面上使用inline-block是一样规则的.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2PVf6mm7-1620061897603)(C:\Users\tuyue\AppData\Local\Temp\1612003181236.png)]

**总结全部坑: 塌陷分自身高度塌陷(浮动流的位置会被文档流进位,这是定律无法解决) 和 父级容器高度塌陷(可以解决)
①只要是文档流都不可以进位文档流,文档流都可以进位浮动流,然后被浮动流覆盖,而浮动流都不能进位文档流
②父级容器高度不塌陷也是等于一个标准文档流,也不可以被父级的其他同级盒子进位的,
如果父级高度塌陷了就是等于存在了,会被进位
(因此浮动流的父级容器塌陷和文档流变为浮动流都会被其他文档流进位!!!)
③当两个或以上元素同时都变为浮动流时 , 则也会并排一行显示 , 且块级盒子的宽度会变为自适应,
即随着文本宽度而设置宽度.(上面有例子)
(但如果父级盒子设置了总宽度并且不够放全部浮动流,则会像inline-block一样被挤下去下一行)
④使用div标签或者伪元素选择器解决父级高度容器塌陷,不能乱插位置,否则出现结构一上一下和被占位

​

2.那么深入具体什么是浮动？(浮动只有左右浮动)

(1)浮动概念:元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父盒子的最左和最右去。
(2)浮动的本质目的：就是为了让多个块级元素像inline-block一样可以同一行上显示。 最核心的关键点就是 :怎么排列的， 是否占有位置

(3)在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器 {
	float:属性值;
}

属性值	描述
left	元素向左浮动 （从左上角开始排࿰