CSS浮动与定位 逆战班

1.浮动（float）： 属性值： left right float
是元素脱离文档流（文档流另有详解）后，方便进行布局， 想左右排列的元素，例如：li设置浮动后，使其由垂直排列变成水平排列


此时，由于未清除浮动所以出现了父元素高度塌陷

元素浮动后
    除inline-table会转成table级元素外，其余元素都会转成display：block  但是这个块级元素并不是真正的块级元素，他只是具备块级元素某些特性，但同时他又具有内联元素的特性，比如不设置宽高时，由内容决定宽高，同样block元素，也会具有行内元素的某些特性，不设置宽高，宽高则有内容去决定

div未浮动之前是块级元素，独占一行

而设置浮动后，div虽然依旧是块元素，但是并不独占一行，如果没有设置宽高，则宽高有内容决定

    设置浮动的元素会脱离文档流，提升一个层级，元素会空出原位置，浮动元素不会影响前面的元素，但是会影响后面的元素，浮动并不会影响文本，文本并不会被浮动的元素覆盖，只会围绕在它的周围

浮动后：
可以看出文字并不会被红色方块覆盖，只会围绕在其周

元素浮动之后，并不会受margin垂直方向的层叠性的影响，也不会受垂直方向margin传递问题的影响，元素浮动后，如果父元素宽度不足，浮动元素会自动换行

未设置浮动时，会出现margin传递问题

设置后

    1.如果是上下排列的元素，如果不给设置浮动元素的后面的兄弟元素设置clear：both，用来隔离与浮动元素之间的距离，该兄弟元素就会收到受浮动元素的影响，为填补浮动元素留下的空位置，因此可能会整个页面的布局
    2.如果是嵌套情况下，并且父元素为以后扩充做考虑并未设置高度，这种情况下，就会产生父元素的高度塌陷，会影响父元素后面的兄弟元素，从而对整个页面的布局产生影响
        1.给父元素设置一个高度可以让父元素保持一定高度，从而不会产生浮动塌陷
        2.给父元素设置overflow：hidden；（触发BFC机制，BFC在此不进行解释，另有详解）
            			给父元素添加overflow：hidden，可以清除父元素高度塌陷，也不会影响后面的元素，（使父元素包裹住浮动的元素，用浮动的元素去撑开父元素，用这种方法来解决浮动塌陷）
            			(https://img-blog.csdnimg.cn/20200223212142142.png)
						（主要是应用于溢出隐藏，也可以清除浮动，父元素高度他先问题）
							但是，如果有浮动的子元素想溢出，那么就会受影响
                                例如：子导航栏的显示隐藏，就不能使用overflow：hidden；来清除浮动，如果使用overflow，会把下面隐藏的子元素给隐藏掉，所以不会出现鼠标移入显示，移除隐藏的效果

        3.让父元素也一同进行浮动，但是会影响后面的元素，从而影响整个页面的布局
        4.将父元素设置成inline-block，有缺陷，此时，父元素的宽高完全有子元素的多少来决定，可能会影响布局
        5.在子元素的最后添加一个空标签，利用上下排列的情形，使用clear：noth；使空标签不受浮动元素的影响，从而撑开父元素，这种方法，不利用后期维护，添加的空标签过多
        6.使用伪类在元素清除浮动，因为：：after等伪类元素默认为内联元素，所以需要先将其转为块级元素再使用clear进行清除
            clear::after{
                content:""
                display:block;
                clear:both;
            }
            使用伪元素清除高度塌陷，不会对整个布局产生影响，而且可以它是以类的形式，可以重复使用，可以清除多个浮动，而不用重复添加

2.定位（position）： 属性值 static（默认值） absolute（绝对定位） relative（相对定位） fixed（固定定位） sticky（粘性定位）
使用position来确定元素的定位方式，任何元素都可以使用定位，但在使用绝对定位和固定定位之后，会改变元素原有的的类型。
1.绝对定位 absolute 设置该值后，会是元素脱离文档流，会使元素的类型进行转换，与float是相同的。同时绝对定位是相对于离其自身最近且定位方式不为static的祖先元素进行定位的。如果祖先元素没有设置定位方式，则其相对于根进行定位
如果设置偏移量后，会对其他元素产生影响， 如果不给使用absolute元素的父元素，添加高度，会造成高度塌陷
使设置绝对定位的元素，在父元素中居中，
1） .element{
width:100px;
height:100px;
position:absolute;
left:0;right:0;
top:0;
bottom:0;
margin:0 auto;
}
2).element{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

2.relative  相对定位  相对对位是相对与元素本身进行定位，并且不会脱离文档流（文档流同上），相对定位的基点，是自身的左上角
    相对定位跟margin很像，但是使用margin的元素会影响到会面的兄弟元素，而使用，相对定位则不会出现这样的问题。
    相对定位与绝对定位ablsolute在偏移量上也是有区别的，在同一方向的偏移量上只有一个能够生效，因为文档流默认的是自上而下，自左往右，所以在同时使用top/bottom是，top会生效，left会生效。
        但是在使用百分比作为偏移量的时候需要注意，百分比是根据父元素的值来计算的，如果父元素是atuo则该百分比是不生效的，相当于值为零
    但在使用定位时，尽量不要使用relative相对定位来对像素进行定位，一般主要应用于对ablsolute来进行包裹性和定位性的限制

3.fixed  固定定位
    固定定位也会使元素脱离文档流，也会对元素的类型进行转换，但是，固定定位只会相对于根进行定位，不会受到祖先元素和滚动条的影响
    可以应用于网页中的蒙层弹窗

4.粘性定位  sticky
        使元素滚动一定距离后，变成固定定位，定在该位置
        	某一元素设置了粘性定位，设置了一个top：xx，随着页面的滚动，当页面滚动到该元素，距离顶端，xx距离后，该元素，便不再随着页面的滚动，而变成了固定定位固定在那里