CSS属性（三）

 浮动

        1.浮动流是一种"半脱离标准流"的排版方式 ​

        2.浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

浮动元素字围现象

        浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

解决高度塌陷问题：

        1.将父级元素高度写死（不推荐）

        2.添加一个空白div，给该div设置清除浮动。这种方式可以解决问题，但是会在页面中添加多余结构

        3.通过after伪类向元素后添加一块空白区域，对其清除浮动。和添加div原理一样，而且不会添加多余div

BFC：把BFC理解成元素的一种属性 只要元素拥有了这个属性 就可以理解为一块独立的渲染区域容器内的不会影响容器外的元素

        如何触发？：

              1.html元素

              2.float不为none

              3.绝对定位(absolute、fiexd)

              4.display取值inline-block table-cell table-caption flex inline-flex

              5.overflow不为visible

        作用/特性

              1.避免外边距重叠

              2.清除浮动

              3.避免元素被浮动元素覆盖

              4.两列布局

              5.三列布局

定位布局

        静态定位                

                是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。position: static;

        相对定位

                相对定位就是相对于自己以前在标准流中的位置来移动 ​ position: relative; ​ 使用top,right,bottom,left来控制

                相对定位是不脱离标准流的, 会继续在标准流中占用一份空间、在相对定位中同一个方向上的定位属性只能使用一个

        绝对定位

                绝对定位就是相对于body来定位 ​ position: absolute;

                默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点，如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。

                绝对定位的元素是脱离标准流的，一个绝对定位的元素会忽略祖先元素的padding。

                只需要设置绝对定位元素的left:50%; ​ 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

        相对定位弊端: ​ 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面 ​ 绝对定位弊端: ​ 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化 ​ 子绝父相 ​ 子元素用绝对定位, 父元素用相对定位

        固定定位

                position: fixed; ​ 固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动。

                固定定位的元素是脱离标准流的, 不会占用标准流中的空间

        粘滞定位

                position: sticky;结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

        z-index

                默认情况下所有的元素都有一个默认的z-index属性, 取值是0. ​ z-index属性的作用是专门用于控制定位流元素的覆盖关系的，如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面