CSS浮动

前言

浮动
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
1.常规流
2.浮动
3.定位

应用场景
1.文字环绕

一、浮动的基本特点是什么？

**修改float属性值为：
-left：元素靠上靠左
-right：元素靠上靠右
默认值为none
1.当元素浮动后，元素必定为块盒（更改display属性为block）
2.浮动元素的包含块，和常规流一样，为父元素的内容盒
**

二、盒子尺寸

1.引入库

1.宽度为auto时，适应内容宽度
2.高度为auto时，与常规流一致，适应内容高度
3.margin为auto，值为0
4.边框、内边距、百分比设置与常规流一样

2.定位

.常规流
2.浮动
3.定位

定位：手动控制元素在包含块中的精准位置
设计的CSS属性：position

position属性
-默认值：static，静态定位（不定位）
-relative：相对定位
-absolute：绝对定位
-fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离文档流的元素：
1.文档流中的元素摆放时，会忽略脱离了文档流的元素
2.文档流中元素计算自动高度时，会忽略脱离文档的元素

相对定位relative

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移
可以通过四个CSS属性对设置其位置：left，right，top，bottom
盒子的偏移不会对其他盒子造成任何影响
当左右（上下）发生冲突时，优先左（上）

绝对定位

-absolute
1.宽高为auto，盒子尺寸适应内容
2.包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块，若找不到，则它的包含块为整个网页（初始化包含块）

固定定位–fixed
其他情况和绝对定位一样，除包含块不同
包含块：固定为视口（浏览器的可视窗口）
定位下的居中
某个方向居中：
1.定宽（高）
2.将左右（上下）距离设置为0
3.将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果为负数，则常规流、浮动元素会将其覆盖