css浮动定位详解（float属性）

本节讲浮动定位

        1、什么是定位
            元素该出现在网页的哪个位置处
        2、定位方式
            1、普通流定位
            2、浮动定位
            3、相对定位
            4、绝对定位
            5、固定定位
        3、普通流定位
            又称为 文档流定位
            网页元素默认定位方式
            页面元素
                块级元素-从上到下的方式排列
                行内元素-从左到右的方式排列
            
            
                

Hello

                

World

                Hello
                World
            
        4、浮动定位
            1、什么是浮动定位
                如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征
                1、浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位
                2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
                3、浮动元素依然位于包含框之内
                4、浮动定位解决的问题-让多个块级元素在一行内显示
            2、属性
                属性：float
                取值：
                    1、none
                        默认值，无浮动定位
                    2、left
                        左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素
                    3、right
                        右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
        5、浮动引发的特殊效果
            1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示
            2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度)，前提：不指定元素宽度的情况下
            3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大
                块级元素：允许修改尺寸
                行内元素：不允许修改尺寸
            4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的。
        6、清除浮动影响
            属性：clear
            取值：
                1、none
                    默认值，不做任何清除操作
                2、left
                    清除该元素左边(上边)的浮动元素所带来的影响
                3、right
                    清除该元素右边的浮动元素所带来的影响
                4、both
                    清除该元素两边的浮动元素所带来的影响
        7、浮动元素对父元素所带来的影响
            由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高             度 将变成0
            解决方案：
            1、直接设置父元素高度
                弊端：必须要知道父元素高度是多少
            2、设置父元素也浮动
                弊端：对后续元素会带来位置的影响
            3、为父元素设置 overflow 属性
                取值：hidden 或 auto
                弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。
            4、在父元素中，追加空子级块级元素，并设置其clear属性值为 both