html+css---float(浮动)

float：（浮动）

        标准文档流：元素在包含块（父元素）排列时从上向下，从左向右

    浮动：

          属性： float

                取值：right（右），left（左）

 浮动元素的特点：

          1.浮动元素上方有在标准文档流中的块元素，浮动元素不会上移

          2.浮动元素浮动不会超出包含块

          3.浮动元素脱离标准文档流=>就不用考虑元素性质，都可以设置宽高，一行显示

          4.浮动元素后面再标准文档流中的元素会上移=》原因：标准文档流符合一行排完才会到下一行

          5.浮动元素会覆盖标准文档流中元素，除了文本内容

## 浮动---高度塌陷

浮动会导致父元素高度塌陷

        **原因**：1.子元素浮动，脱离标准文档流，2.父元素没有高度，默认由子元素给它撑开

        **解决方法**：

          1.父元素设置固定的高度，不推荐使用

        height:100px            //在父元素设置

          2.BFC：块级格式化上下文

            父元素开启BFC方法：

            a. 设置overflow的值非默认visible

            overflow:hidden;

            b. 父元素设置浮动:影响父元素的兄弟元素布局，不推荐

            float:right;

            c. 设置父元素为行内块元素

            display:inline-block;

            e. 设置绝对定位  

            position:absolute;        

          3.通过html在父元素中添加一个在标准文档流的块元素，清除浮动

            .clearfix::after,
            .clearfix::before {
                content: "";
                display: table;
                clear: both;
            }

## clear （清除浮动）

 清除浮动 clear=》清除浮动元素对其的影响

        1.因为前面元素浮动，后面元素就会上移

         取值：

           **left**：清除左边浮动元素对其的影响

           **right**：清除右边浮动元素对其的影响

           **both**：清除二边对他影响更大的一侧浮动=》元素上移的距离