float属性

Posted 2020-07-15

1. float本质

   • float属性原本的作用就是让文字环绕，要牢记这一点

2. float特性

   1. 包裹性：一旦某个元素赋予了float属性，那么它就相当于被包裹住了，它里面无论发生什么都不会对这个元素以外的元素有影响了
      • 具有包裹性的其他性质
        1. display:inline-block/table-cell/...
        2. position:absolute/fixed/sticky
        3. overflow:hidden/scroll
      • 包裹方式
        1. 收缩
        2. 坚挺
        3. 隔绝
   2. 破坏性：比如说两个block元素，在没有任何float附加条件下，它是上下排列的，相当于上面那个元素占据了上面的父容器，但是一旦赋予float属性，这个父容器就不复存在，可以说高度塌陷了，然后下面的元素自然与上面的呃元素并列了。
      • 具有破坏性的其他性质
        1. display：none;
        2. position:absolute/fixed/sticky

3. 清除浮动

   1. 最简单

      clear:both;

      • BFC/haslayout声明
        1. float:left/right
        2. position:absolute/fixed
        3. overflow:hidden/scroll(IE7+)
        4. display:inline-block/table-cell(IE8+)
        5. width/height/zoom:1/..(IE6/IE7)
   2. 权衡后的策略

       .clearfix:after{content:‘‘;display:block;height:0;overflow:hidden;clear:both;}
       .clearfix{*zoom:1;}

   3. 更好的方法

      //clearfix只能应用在包含浮动子元素的父级元素上    
      .clearfix:after{content:‘‘;display:table;clear:both;}
      .clearfix{*zoom:1;}

4. clear与margin

   1. 用clear清除浮动，外面的东西依旧会对内部造成干扰，所以会发生margin重叠的效果
   2. 用BFC清除浮动（父元素添加overflow：hidden），父元素不会塌陷，可以被撑开，内部的东西被包裹住了，因此margin不会重叠

5. float滥用

   1. float效果
      • 元素block块状化（砖头化）
      • 破坏性造成的紧密排列特性（去空格化）
   2. float布局的问题
      • 容错性差，问题多
      • 需要尺寸确定
      • IE低版本各种问题

6. float与流体布局

   1. 浮动与两侧皆自适应的流体布局

      .object{display:table-cell;*display:inline-block;
                  width:2000px;*width;}         

   2. 浮动与右侧尺寸固定的流体布局

      /*改变DOM流体布局*/
      .right{float:right;width:56px;}
      .left{margin-right:76px;}
      /*不改变DOM流体布局*/
      .left{float:left;margin-right:76px;}
      .right{float:left;width:56px;margin-left:-56px;}

   3. 浮动与单侧尺寸固定的流体布局

      /*不好的布局*/
      width:484px,float:right;
      /*好的布局*/
      margin-left:76px;

7. float兼容性

   • IE7问题
     1. 含clear的浮动元素包裹不正确的问题
     2. 浮动元素倒数两个数莫名垂直
     3. 浮动元素最后一个元素重复
     4. 浮动元素楼梯排列问题
     5. 浮动元素与文本不在同一行