浮动与清浮动

浮动

浮动的原理：设置浮动的元素超出文档流

        文档流：就是元素从上到下从左到右的布局顺序

        浮动的作用：从整体出发，把标签元素进行横向布局

        使用inline-block横向布局的弊端：

            1.元素之间有缝隙，需要解决

            2.低版本浏览器不支持 inline-block

        浮动的特点：

            1.浮动元素超出文档流

            2.块属性标签浮动之后不再独自占据一行空间，如果不设置宽高，则它的宽高由内容撑开

            3.块属性标签浮动之后，他的margin属性的auto值失效

            4.行属性标签浮动之后可以设置宽和高并且支持上下padding和上下margin

清浮动

当子级元素进行浮动的时候，他的父级会被因此产生影响，由于浮动元素脱离文档流，父元素没有子元素撑开，导致父元素没有高度，这样在布局的时候会产生混乱

        清除浮动产生的影响（清浮动）

            1.给浮动元素的父级，添加 overflow：hidden;

            2.给父元素设置指定高度，确保布局正确

            3.给父元素添加 display: inline-block;该方法兼容性差

            4.给父元素添加浮动，可能会影响布局

            5.设置一个空标签，在空标签中设置属性

                .clear{

                    clear:both;

                    /*防止ie低版本具有默认高度*/

                    height:0;

                    overflow:hidden;

                }

            6.通过after伪元素清浮动

                .clearfix::after{

                    content: '';

                    display: block;

                    height: 0;

                    overflow: hidden;

                    clear: both;

                }