前端学习笔记(八)

第八章：浮动

一.浮动可以让块级元素横排显示

    定义:使元素脱离文档流，按照指定方向（左右）发生移动，遇到父级边界或者相邻的浮动元素停了下来。
    只有两个方向，没有上下 只有左右
    div{
        float:left;
    }
    文档流~
    CSS的定位机制：文档流/普通流（标准流），浮动和定位
    普通情况下可见元素在排列是所占用的位置 将元素自上而下分成一行行, 并在每行中按从左至右的顺序排放元素 就是我不给他添加任何样式的时候默认排列的样子！ 遵守最基本的元素排列的规则，这就是文档流！
    脱离文档流
    1.浮动的一般情况
    依次横排显示 宽度不够会掉下去
    注意：左浮动和右浮动的顺序的变化
    2.浮动的（特殊）情况
    第一种情况
        只给前面的一个<li> 浮动，后面的盒子会消失！其实是会被遮住。前面的盒子不占文档流了，就会浮到空中！

    第二种情况 

        浮动的元素只影响他后面的元素所以给了第一个浮动 影响了后面的元素 他前面的元素没有浮动，所以后面的后面就不受影响！

    第三种情况
        如果父级宽度太窄，无法容纳所有元素，无法容纳的元素会掉下去，之后还是会执行浮动，向左或者向右知道遇到边框就会停下来！
    第四种情况
        浮动的元素高度不同，并且外面盒子宽度不够的情况下，往下掉的过程中可能会被卡住浮动对文字的影响：环绕
    3.float和inlineblock的区别
        相同点：
            都支持横排显示
            都支持宽高
            不给宽度的时候默认都是内容撑开宽高
            都支持margin padding
            都不支持margin:auto;
        不同点：
            浮动脱离文档流，inlineblock不脱离
            浮动提升层级半级 inlineblock中间解析一个空格

 二.清除浮动

    为什么要清除浮动呢？
    浮动会造成父级的塌陷影响布局
    清除浮动的原则：
        1.浮动元素本身不能清除浮动
        2.哪里浮动，哪里清除！
    清除浮动的方式
    clear:both;
    子元素方式：最后添加空标签
    /*缺点：在ul li 要注意 因为不能嵌套块级 并且浮动元素本身不能清除浮动*/
    <div style='clear:both;'></div>
    给父级用的方法
        1.给父元素添加高度 缺点是扩展性不好，一般都是内容撑开高度
        2.给父级inlineblock
        内容撑开 缺点是父级和叔叔中间会解析空格
        3.overflow:hidden;
        4.after伪元素（时下主流）
        .clearfix:after{content:'';display:block;clear:both;}
    解决低版本ie的兼容性问题
        .clearfix{zoom：1；}

三. minwidth    maxwidth

    minwidth
    属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 minwidth的值。
    maxwidth
    属性用来给元素设置最大宽度值.