前端开发第八天-浮动小知识

一、标准文档流：

        浮动：浮动可以使元素【脱离文档流】，【按照指定的方向进行排列】，直到遇到遇到父元素的边界或者另一个浮动元素【停止】

        语法： float

            属性值： left  左浮动

                    right 右浮动

                    none  不浮动（默认值）

二、浮动特性：

                1、可以使块级元素在一行排列

                2、可以使元素脱离文档流

                3、可以提升层级

                4、可以使行内元素设置宽高

三、

浮动带来的影响：（清除浮动）

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

            影响后面元素的布局

四、

方法一： 固定高度法

            给浮动的父元素设置固定高度

            优点：代码简洁

            缺点：不够灵活

方法二：overflow方法

            给父元素添加overflow属性，overflow不为 visible 默认值，其它值都可以实现

            优点：代码简洁

            缺点：可能会触发不需要的滚动条或者可能会隐藏内容

 .wrap1 {

            /*  */

            overflow: hidden;

            /* 溢出隐藏 */

        }

        .wrap2{

            overflow: scroll;/* 触发滚动条 强制加上水平和垂直的滚动条 */

        }

        .wrap3{

            overflow: auto;/* 触发滚动条 前置条件有内容被隐藏 */

        }

 clear属性： 清除浮动

                取值：left  清除左浮动

                    right  清除右浮动

                    both   两个都清除（通常使用both）

方法三：额外标签法

            在浮动元素的最后加一个空的块级元素，此元素本身不浮动，并且给元素添加清除浮动的属性 clear 属性

            缺点：代码冗余，影响代码的可读性

方法四：伪元素法

            给浮动元素的父元素添加 clearfix

                .clearfix:after{

                        content: "";为伪元素添加内容

                        display: block; 转为块级元素

                        clear: both;

                }

            优点：内容适应性强，不会在结构上产生冗余代码，可以多次重复使用

        */

        /*.wrap:after{ 默认是行级标签

            content: "";为伪元素添加内容

            display: block; 转为块级元素

            clear: both;

        }*/

五、

两列自适应

        要点：单列定宽、单列自适应

            左列定宽，左侧浮动，右侧需要使用margin-left预留位置

            右侧定宽同理