浮动

　　一.标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式


        二.display属性

            display:更改块级元素和行内元素的相互转换
            block：块级元素的默认值
            inline：行内元素的默认值
            inline-block:同时具有行内和块级元素的特性
            none：隐藏元素内容

        三.float浮动

            left    元素向左浮动
            right    元素向右浮动
            none    默认值。元素不浮动，并会显示在其文本中出现的位置
            <style type="text/css">
                .layer01{
                    float: left;
                }
                .layer02{
                    float: right;
                }

            </style>

        四.clear清除浮动

            left    在左侧不允许浮动元素
            right    在右侧不允许浮动元素
            both    在左、右两侧不允许浮动元素
            none    默认值。允许浮动元素出现在两侧
            <style type="text/css">
                .layer01{
                    clear:left;
                }
                .layer01{
                    clear:right;
                }
                .layer01{
                    clear:both;
                }
            </style>

        五.解决父级边框塌陷的方法

            1.浮动元素后面加空div
                <div class="layer05">
                <style type="text/css">
                    .layer05{
                        clear: both;
                    }

                </style>

            2.设置父元素的高度
                <style type="text/css">
                    #father{
                        height: 500px;
                    }
                </style>

            3.父级添加overflow属性
                visible    默认值。内容不会被修剪，会呈现在盒子之外
                hidden    内容会被修剪，并且其余内容是不可见的
                scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
                auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
                <style type="text/css">
                    #father{
                        overflow: hidden;
                    }
                </style>

            4.父级添加伪类after
                <div id="father" class="clear"></div>
                <style type="text/css">
                    .clear:after{
                        content: '';          /*在clear类后面添加内容为空*/
                        display: block;      /*把添加的内容转化为块元素*/
                        clear: both;         /*清除这个元素两边的浮动*/
                    }
                </style>

        六.inline-block和float的区别

            display:inline-block
            可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
            位置方向不可控制，会解析空格
            IE 6、IE 7上不支持
            float
            可以让元素排在一行并且支持宽度和高度，可以决定排列方向
            float 浮动以后元素脱离

转载于:https://www.cnblogs.com/chx9832/p/9198253.html