H5-前端学习-05背景图属性与浮动属性

        哈喽，各位小伙伴，我们会更新一些前端的文章，想学习前端的小伙伴，特别是0基础的小伙伴，或者对此感兴趣的小伙伴，可以关注我，我会保持更新

- 背景属性：
        1.背景图大小
            background-size:x y
            x-------背景图宽
            y-------背景图高
            关键词取值
                cover------覆盖，图片等比缩放，会出现图片被剪裁的效果(常用)
                contain------填充，图片等比缩放，水平/垂直方向上填充满后，图片不在继续等比缩放，会导致容器出现留白
        2.背景图固定与滚动
            background-attachem:
                scroll----滚动（默认）
                fixed-----固定
    浮动属性：
        作用：用来页面排班布局，让原本垂直方向上排列的元素，水平方向上排列
        属性：float：
            取值：
            left-----左浮动
            right----右浮动
            none-----不浮动
        概念：元素默认从上到下或者从左到右的排列方式被称之为标准文档流
        元素浮动特点：
            1.兄弟关系中前面元素浮动，后面元素不浮动，浮动元素在页面中不占位置(脱离文档流，半脱离状态)，后面不浮动元素会自动补位
            2.多个元素同时浮动
                多个元素同时左浮动，元素依次从左往右排列
                多个元素同时右浮动，元素依次从右往左排列
            3.多个元素同时浮动，一行内放不下时，浮动元素会自动折行显示
            4.多个元素同时浮动，一行内放不下时，浮动元素会自动折行显示，折行的位置参考前面一个浮动元素的高度
            5.前面元素浮动，后面元素不浮动，如果不想后面元素自动补位，需要给补位元素添加清除浮动属性
            属性：clear（写在补位元素上面）
                取值：
                left-----清除前面左浮动元素带来的影响
                right-----清除前面右浮动元素带来的影响
                both-----清除前面浮动元素带来的影响（常用）
        元素浮动带来的影响：
            父子关系中，子元素添加浮动，父元素没有固定的高度，会造成父元素高度产生问题-------称为父元素高度塌陷
            解决方法：
                1.给父元素添加一个固定的高度
                    弊端：里面再添加其他元素，会造成元素超出的效果
                2.给补位元素添加清除浮动（clear）属性，让补位元素不去补位
                3.如果父元素中告知有一个子元素浮动，需要在浮动子元素后面添加一个元素（常用div）用来清除浮动
                4.给父元素添加overflow：hidden；元素会触发BFC机制，形成一个独立的区域（会计格式化上下文），
                  与区域外面互不影响，区域里面浮动元素高度参与计算
                5.万能清除法