#前端学习笔记#day6_1 claar position

clear

作用：清除浮动元素对当前元素所产生的影响

可选值：left清除左侧浮动对当前元素的影响

              right清除右侧浮动对当前元素的影响

              both清除大的那个

原理：设置清除浮动以后，浏览器会自动为元素加上一个外边距，以使其位置不受其他元素影响

因为box3清除了2对它的影响，3就会出现在2的下面

高度塌陷的问题，属于表现上的问题。

::after 行内元素，利用伪类撑起父元素

        .box1::after{

            display: block;

            content: "";

            clear: both;

        }

clearfix 高度重叠

如果父子元素叠在一起，设置margin-top外边距会一起动时，我们需要在父元素前加个伪元素，把他们的外边距隔开

        .box1::before{

            content: "";

            display: table;

        }

我们需要把display设置成table，它不会占位置，也可以起到隔开外边距的作用

::after 解决高度塌陷。

::before解决重叠

display:block 和table都能解决高度塌陷的问题

table既可以解决高度塌陷也可以解决外边距重叠

        .clearfix::before,

        .clearfix::after{

            content: '';

            display: table;

            clear: both;

        }

所以这个样式可以解决高度塌陷和外边距重叠的两个问题

如果哪里有这个问题。就给他加这个class=clearfix

position定位      

可选值：static默认值，元素是静止的没有开启定位，（写和不写一样）

              relative 开启相对定位

              absolute 开启绝对定位

fix 开启元素的固定定位

sticky 开启元素的粘滞定位

相对定位 position:relative 开启相对定位（相对于自己之前的位置）

       特点：元素开启相对定位以后，如果不设置偏移量，元素不会发生任何变化

                相对定位是参照元素在文档流的定位

                相对定位会提升元素的层级

                相对定位不会使元素脱离文档流

                相对定位不会改变元素的性质，块还是块，行内还是行内

       偏移量：当元素开启定位以后，可以通过设置偏移量来设置元素的位置

                     偏移量有：top bottom left right

（注意，使用top等元素前一定要先开启定位）

top是定位元素和定位位置上面的距离，top越大，越向下

bottom 定位元素和定位位置下面的距离，bottom越大，越向上

left 定位元素和定位位置左边的距离

right 定位元素和定位位置右边的距离