为何CSS不支持父选择器？

浏览器解析HTML文档，是从前往后，有外及里的。所以时常会看到页面先出现头部然后主体内容再出现的加载情况。

但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响祖先元素的样式？于是，网页渲染呈现速度会大大减慢，浏览器会出现长时间的白板。加载多少HTML就可以渲染多少HTML，在网速不是很快的时候，就显得尤为的必要。

实现垂直居中的几种方式

使用line-height等于height实现行内文字垂直居中
使用top:0; bottom:0; margin:auto; position: absolute;实现绝对定位元素的垂直居中（块需要指定高度）
使用top:50%; transform:translateY(-50%); position:absolute实现绝对定位元素的垂直居中（块无需指定高度）
使用display:flex;align-items:center; 实现块的垂直居中（块无需指定高度）
使用display:table-cell; vertial-align:middle 实现块的垂直居中（块无需指定高度）

<div style="height: 50px;line-height: 50px;border: 1px solid red;margin-bottom: 10px;">
        使用line-height等于height实现行内文字垂直居中
    </div>


    <div style="background: blue; height: 100px; position: relative;">
        <div style="background: burlywood; height: 40px;margin: auto;top: 0;bottom: 0;position: absolute; width: 100%;">
            使用top:0; bottom:0; margin:auto; position: absolute;实现块的垂直居中
            （块需要指定高度）
        </div>
    </div>


    <div style="height: 100px;background: red ;position: relative;">
        <div style=" background:yellowgreen;top: 50%;transform:translateY(-50%); position: absolute; width: 100%;">
            使用top:50%; transform:translateY(-50%); position:absolute实现块的垂直居中
            （块无需指定高度）
        </div>
    </div>

    <div style=" background: green;height: 100px; display: flex; align-items: center; ">
        <div style="background: gold;">
            使用display:flex;align-items:center; 实现块的垂直居中
            （块无需指定高度）
        </div>
    </div>

    <div style="background: cadetblue;height: 100px;display: table-cell; vertical-align: middle;">
        <div style="background: blue;">
        使用display:table-cell; vertial-align:middle 实现块的垂直居中
        （块无需指定高度）
        </div>
    </div>

清除浮动的几种方式

浮动的元素存在于正常的文档布局之外，在某些方面的行为相当奇怪：

首先，他们的

浮动元素的父元素下面新增一个空的div，并设置样式为：clear:both
浮动元素的父元素添加伪元素:after,并设置样式为：clear:both;content:'XX';display:block;height:0;visibility: hidden;
浮动元素的父元素触发BFC，如添加样式：overflow: auto/ display: flow-root 等
浮动元素的父元素设置高度（父元素中默认所占的面积的有效高度为0）

    <style>
        .float-box-father{
            /**方式3 创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto **/
            /* overflow: auto; */

            /* display: flow-root */

            /** 方式4 浮动元素的父元素添加高度**/
            /* height: 250px; */

           

        }
        .float-box-father:after{
            /**方式2 浮动元素的父元素添加伪元素：after，并设置如下样式**/
            /* clear: both;
            content: '111';
            display: block;
            height: 0;
            visibility: hidden; */
        }
        .float-box{
            float: left;
            box-sizing: border-box;
            width: 50%;
            height: 50px;
            border: 1px solid beige;
            background-color: green;
            opacity: 0.5;
        }
        
        .box{
            width: 100%;
            height: 100px;
            background-color: blue;
        }
       
        
    </style>      
    
    <body>
        <div class="float-box-father">
            <div class="float-box"></div>
            <div class="float-box"></div>
            <div class="float-box"></div>
            <div class="float-box"></div>
            <div class="float-box"></div>
            <div class="float-box"></div>
            <div class="float-box"></div>
            <div class="float-box"></div>
            <div class="float-box last-float-box"></div>
        <!--方式1：在box-2前面新增一个div，添加样式clear:both;-->
        <!-- <div style="clear: both;"></div> -->
        </div>
        <div class="box"></div>
</body>