CSS关于传统网页中的三大布局方式，手动码字+大白话

一个完整的网页必须要以下三种布局方式一起构成

**1.普通流（标准流、文档流）**
    标签按照规定好默认方式排列，比如DIV它独占一行，行内元素从左右到依次排列，碰到父元素边缘则换行

**2.浮动**
    可以让多个块级元素一行内排列显示
    网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
    网页布局第二准则：先设置盒子大小，之后设置盒子的位置
    注意
        1.浮动元素会脱离标准流（脱标）（脱离标准流的盒子移动到指定的位置，且脱标的盒子不再保留原先的位置）
        2.浮动的元素会一行内显示并且元素顶部对齐（浮动的元素是互相贴靠在一起且不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
        3.浮动的元素会具有行内块元素的特性（没有宽度，内容多宽撑多宽）
        4.为了约束浮动元素位置，先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则（白话
            意思就是用个div盒子把浮动元素框起来，让它们在盒子里浮动，不要整个页面乱跑）
        5.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
        6.浮动的元素不会压住下面标准流的文字，它只会压住盒子，但里面的文字还是会露出来的（原因是浮动最初设计出来，是为了做文字的环绕效果）

    思考：为什么需要清除浮动？
        由于父级盒子很多情况下，不方便给高度（比如淘宝的商品每天都在增加，我希望的是父级盒子被子盒子自行撑开，有多少商品就放多少商品）
        但是子盒子浮动不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，清除浮动的本质就是清除浮动元素造成的影响。清除浮动之后，
        父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流。
        解决策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
        解决方案：
                1.额外标签法也称为隔墙法，缺点是添加了无意义的标签，导致结构变差（不推荐）
                    在最后一个浮动的元素后，添加一个块级元素，并给这个标签写一个样式 { clear:both }
                2.父级添加overflow，缺点是无法显示溢出的部分（这个单词本身的意思是溢出，它是针对溢出的属性，如果子元素有溢出一部分，它就直接给你砍了不显示）
                    给父元素添加overflow属性，将其属性值设置为hidden、auto、或scroll。
                3.伪元素清除浮动，现在的淘宝，百度等都是用该方法清除浮动（它相当于在父元素里插入一个盒子，但它是不影响结构的）
                    给父元素增加一个样式 .clearfix:after {content:""; display:block; height:0; clear:both; visibility:hidden;}
                4.双伪元素清除浮动，腾讯，小米用的是这种方法（它在父元素里的最前边和最后边都插入一个盒子，把路堵死）
                    给父元素增加一个样式 .clearfix:before,.clearfix:after {content:""; display:table;} .clearfix:after{clear:both;}

**3.定位**
    为什么需要定位？
    1.浮动可以让多个块级的盒子在一行没有缝隙的排列显示，经常用于横向排列盒子，但它和标准流一样，有难以实现的效果，
比如将某个盒子固定在页面中，不随 滚轮滚动而滚动。
    2.定位则是可以让盒子自由的在某个盒子内移动位置，或者固定在屏幕中某个位置，并且可以压住其他盒子。

    定位 = 定位模式 + 边偏移
    定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子（一样的利用上下左右距离来调整这个盒子最终的位置）

    定位模式用于指定一个元素在文档中的定位方式。‘边偏移’则决定了该元素的最终位置
        position：static（静态定位），relative（相对定位），absolute（绝对定位，压住别的盒子显示，比如某些按钮），fixed（固定定位，可以在页面某个位置固定显示）

            relative：1.自恋型定位，它总相对于自身来移动，意思就是它总是以自己原先的坐标位置为参照，来移动。
                      2.相对定位移动的盒子，它原来的位置保留，后面其他的盒子仍然以标准流的方式对待它

            absolute：1.拼爹型定位，它总是相对于它祖先元素来移动
                      2.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
                        注意：绝对定位盒子所参考的祖先元素也必须有定位，如果祖先元素没有position，它还是会参照浏览器为准，例如div>ul>li，如果ul没有定位
                        而div有定位，则参照div的位置
                      3.设置绝对定位后，盒子飘起来了不再占有原先的位置，后面的盒子按照标准流直接占有它原先的位置
                      4.绝对定位会压住下面标准流所有的内容（和浮动不同）

            fixed：1.固定定位是元素固定于浏览器可视区的位置，它始终会在一个位置，不随页面滚动而消失
                    2.它以浏览器的“可视窗口”为参照点移动元素（可视窗口就是你浏览器body那一块区域，缩小浏览器，能看见的body区域也变小了）
                    3.不占有原先的位置

            sticky：1.粘性定位，可被认为是相对定位和绝对定位的混合。
                    2.以浏览器的可视窗口为参照点移动元素（固定定位特点）
                    3.粘性定位占有原先的位置（相对定位特点）
                    4.粘性定位虽然非常灵活，但它的兼容性较差

    边偏移？
    边偏移就是定位的盒子移动到最终位置。有top,bottom,left,right四个属性，都是定义的那个元素相对于父元素的上下左右四个边线的距离

    定位叠放顺序-z-index
        在使用定位布局时，设置了定位的盒子可以压住别的盒子，但是定位盒子彼此之间参照的是z-index这个属性来控制前后顺序
            选择器 { z-index:1;}
            1.数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上（数字不能加单位）
            2.如果属性值相同，则按照书写顺序，后来居上
            3.只有定位的盒子才有z-index属性

    绝对定位的盒子居中方法？
        因为设置了position:absolute;的盒子，margin:atuo就不起作用了，所以只能手动调，思路是先移动至父盒子的一半{left：50%}，再用margin微调一下就可以了

    定位特殊特性？
        绝对定位和固定定位也和浮动类似。
            1.行内元素添加绝对或者固定定位，可直接设置高度和宽度。
            2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。


注：参考Pink老师在B站的html5+css3，感谢Pink老师