前端工程师面试第三弹--浮动

  最近因为面试的原因，梳理了很多之前都没有好好研究的东西。但是🙅的是每次还是能被问到各种各样我不会的问题，大概真的是学艺不精。确实每个人都有不懂的地方，但是这种老生常谈的问题，不应该成为你走的更高站的更远的绊脚石。大概会写好几篇相关的文章。

浮动作用及如何清除浮动

参考网址： http://blog.csdn.net/FE_dev/article/details/68954481 这篇文章写的真是太棒了。

参考网址： https://www.jianshu.com/p/09bd5873bed4

1.浮动

浮动元素可以脱离文档流并向左或者向右浮动，直至遇到父元素或者另一个浮动元素。

• 脱离文档
• 内联排列
• 父元素坍塌(高度为0)

  ### css
  .box-wrapper {
    border: 5px solid red;
    background-color: yellow;
  }
  .box-wrapper .box {
    float: left; 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    background-color: green;
  }
  ### html
  <div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

此时由于子元素脱离了文档流，导致父元素未被撑开，所以此时的背景颜色并未显示，而我们只能看到边框单独的在浏览器上方。当然此时我们并没有设置height，而是让子元素自动撑开，如果你设置了高度的话，父元素可利用本身的高度将元素包裹进去。

2.清除浮动

• clear
  可以在div嵌套的最后一层加一个div并设置clear:both即可清除浮动
• clearfix
• bfc

  3.浮动应用场景

• 导航条
• 文字环绕效果
• 自适应多列布局。比如下面的左侧固定宽度，右侧自适应

  ### css
  .left{
      width: 200px;
      height: 400px;
      background-color: red;
      float: left;
  }
  .right{
      height: 400px;
      background-color: yellow;
  }
  ### html
  <div>
      <div class="left">左页面</div>
      <div class="right">右页面</div>
  </div>

参考网址: http://www.nenew.net/use-clearfix-to-clear-float-on-element.html

构成Block Formatting Context的方法有下面几种： 
 
    float的值不为none。 
    overflow的值不为visible。 
    display的值为table-cell, table-caption, inline-block中的任何一个。 
    position的值不为relative和static。 
 
很明显，float和position不合适我们的需求。那只能从overflow或者display中选取一个。
因为是应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求
（会把下拉的菜单隐藏掉或者出滚动条），那么只能从display下手。 
 
我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
但是display: inline-block会产生多余空白，所以也排除掉。
剩下的只有table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context。
这样我们新的.clearfix就会闭合内部元素的浮动。