浮动

关于浮动

最初是为了实现文字环绕效果

• 脱离标准流：浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度，这种问题称为高度塌陷。解决高度塌陷问题的前提是能够识别并包含浮动元素，也就是清除浮动。
• 浮动的元素互相贴靠：多个浮动元素会相互贴靠，如果宽度不够会重启一行
• 宽度的收缩
  • 行内元素float:left之后会变成块级元素吗？不会，更偏向于inline-block，最明显的区别是width不会默认占满一行

清除浮动：清除浮动带来的副作用

• 手动设置父元素宽高

• （不推荐）父级元素添加属性overflow: hidden，触发 BFC

  • 简洁，但内容增多若为自动换行，会有内容被隐藏，无法显示要溢出的元素

• clear属性：both左右均不可以出现可浮动属性

  • 不直接添加在元素上，因为clear: both会使margin-top失效
  • （推荐）使用after伪元素清除，把clearfix添加给父级元素

    • .clearfix {
          *zoom: 1; /* ie6清除浮动的方式，*表示只有ie6执行，触发hasLayout */
      }
      .clearfix:after {
          content: "";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
      }

• （推荐）使用before和after双伪元素清除

  • .clearfix:after,
    .clearfix:before {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }