css04-浮动

浮动:
    1:作用:用于布局页面;
    2:css布局的三种机制:
    3;普通流在布局中的特点:
    4:使用浮动的作用
    5:为什要清除浮动
    6:利用浮动完后导航栏
    7:能够清除浮动
    8:使用ps切图工具

    1:css布局的三种机制:
        1:标准流:
            1:块级元素:div h p dt 
            2:行内元素:span <strong>
        2:浮动:
            1:为什么用浮动:
                1:如果让多个div布局在同一行:
                    1:行内块内部有空白缝隙很难去除;
                2:如果实现盒子的左右对齐:
            2:什么是浮动:
                1:脱离普通流的控制;
                2:移动到指定位置;
            3:作用:
                1:让多个盒子同行显示;
                2:实现盒子的左右对齐;
                3:浮动最早是用来控制图片,实现文字环绕图片的效果;
            4:使用方式:
                选择器{
                    float:left|right
                }
            5:特性--浮 漏 特
                1:浮:最上边的盒子漂浮在其他盒子之上(脱标)
                2:漏:浮动的盒子会把位置漏给其他盒子,不在占有之前的位置
                3:特:浮动的属性会改变元素的dispay属性
                    1:添加浮动后仍然是块级元素,默认相当于转换为了inline-block,
                        区别:行内块有空隙,float没有空隙
                    2:消除中间空隙,浮动元素之间默认没有空隙    
                    3:如果parent盒子放不下float,则会另起一行
            6:浮动小细节:
                1:float是脱标的,所以需要给float添加一个标准流的parent,降低对其他标准流的影响
                2:一个网页都是由标准流+float完成的
            7:列表使用:
                1:重要的导航栏的实现采用:li+a 来实现:语义更清晰
                2:防止浏览器过滤
            8:浮动元素与父元素之间的关系:
                1:不会与parent的边框重叠,不会压着边框;
                2:不会超过父盒子的内边距;
            9:浮动元素与兄弟盒子之间的关系:
                1:两个都浮动则并列;
                2:第一个不浮动,第二个浮动,则不变;
                3:浮动元素只会影响后面的盒子;
                4:所谓浮动就是在当前位置浮动;
        2:为什么要清除浮动:
            1:为什么用浮动:可以让多块元素单行显示;
            2:为什么清除浮动:
                1:在标准流里孩子多高,父亲就有多高
                2:在浮动情况下,孩子设置浮动,父亲的高度会消失(从而会影响页面布局)
                3:由于浮动的盒子不占用位置,则会导致父盒子没有高度;

            3:清除浮动的本质:子元素设置浮动,浮动的盒子不占用位置,父元素高度会消失的问题;
            4:消除浮动的方法:选择器{
                            clear:left|right|both
                            }
                1:额外标签法:
                    1:在浮动元素的后面添加一个空标签
                        <div class="sec"></div>
                        <div style="clear: both;"></div>
                    2:优点:通俗易懂,书写方便
                    3:缺点:添加无意义标签,结构化差
                2:给父级添加overflower:hidden(溢出隐藏)|auto(溢出滚动)|scroll (溢出滚动)
                    1:优点:代码简介
                    2:缺点:内容增多时容易造成不会自动换行导致内容被隐藏,无法显示要溢出的元素
                3:after伪元素清除浮动:
                    1:是额外标签法的升级版;使用方法:
                            .clearfix:before,
                            .clearfix:after{
                                content: "";
                                display: table;
                            }

                            .clearfix:after{
                                clear: both;
                            }

                            .clearfix{
                                *zoom: 1
                            }
                    2:优点:不用添加单独标签,代码更简洁;
                    3:缺点:兼容性问题
                4:双伪元素:
                    
            5:清除浮动触发条件:
                1:父元素没有高度;
                2:子元素设置浮动;
                3:影响下面布局;