CSS--浮动

    <!-- 浮动:可以改变元素标签默认的排列方式,常用于使多个块级元素在一行内排列显示 -->
    <!-- 原理:创建浮动框,将其移动到一边,直到左边缘或右边缘触及包括块或另一个浮动框边缘 -->
    <!-- 语法:选择器{float:none(不浮动)/left/right} -->
    <!-- 特性:1脱离标准流,浮动的盒子不再保留原先位置,不会影响前面的标准流
             2 会在一行内显示且顶部对齐,装不下时另起一行
             3 具有行内块特性,可以直接设置宽高,不需要转换  -->
    <!-- 常用方法:先用标准流父元素排列上下位置,之后内部子元素采取浮动排列左右位置 -->
    <!-- 注意:父盒子不定高度时,当子盒子全部浮动后不再占有位置,父盒子高度为0 -->
    .fa {
            /* height: 50px; */
            background-color: pink;
            margin-top: 40px;
        }
        
        .son {
            float: left;
            width: 30px;
            height: 30px;
        }
        /* 父盒子清除浮动:选择器{clear:left/right/both} */