Css中的float和BFC（Block Formatting

css中的float（浮动）：

在css中浮动的作用可让元素脱离文档流，从而达到某种布局效果

• float：left，可以让元素向左浮动，元素会浮动到父元素的左边缘，由于脱离了文档流，所以处于正常文档流内的元素会后来居上，相应的浮动元素会盖在位于它之后，且和它处于同一父元素内的元素上面。
  <pre>
  <code><div class="container"></code>
  <code><div class="elem-1"></div></code>
  <code><div class="elem-2"></div></code>
  <code><div class="elem-3"></div></code>
  <code></div></code>
  </pre><pre>// float 1
  .container {
  border: 3px solid blue;
  padding: 10px;
  }
  .elem-1 {
  width: 80px;
  height: 80px;
  background-color: green;
  }
  .elem-2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  }
  .elem-3 {
  width: 120px;
  height: 120px;
  background-color: red;
  }
  // float 2
  .elem-1 {
  width: 80px;
  height: 80px;
  float: left;
  background-color: green;
  }
  </pre>
  当我给elem-1加上float:left之后，elem-1脱离文档流，且浮动于elem-2之上
  float-1 添加float之前.png
  float-2 加上float之后.png
  如果我给所有elem都加上float：left之后，它们都会脱离文档流，且会按照浮动方向依次排列，一个元素内部所有子元素都处于浮动状态时，父元素会出现塌陷的情况，也就是身体被掏空
  <pre>// float 3
  .elem-2 {
  width: 100px;
  height: 100px;
  float: left;
  background-color: yellow;
  }
  .elem-3 {
  width: 120px;
  height: 120px;
  float: left;
  background-color: red;
  }
  </pre>
  float-3.png
  但注意到元素float：left之后，虽然脱离文档流，但还是会浮动到content的边缘，并不会超出padding
• 浮动的结果
  元素的浮动会在页面布局的过程中很方便，但造成的影响有时也会让人很头疼，元素塌陷就是其中一个弊端。
  由上面的例子可以看出，元素的浮动，会影响到其后相邻的元素（elem1浮动于elem2上，盖住了elem2的内容），同时浮动会造成的一个结果就是<u>产生一个BFC的context</u>, 这个我们之后在继续说明BFC是个什么鬼
• 清除浮动
  为了处理由于用了浮动，一时开心而埋下的隐患，你就必须得知道清除浮动的一些方法。
  常用的一些方法有

1. 在其相邻元素上加上<code>clear:left/right/both;</code>这个css样式，
   <pre>
   <div class="container">
   <code> ...</code>
   <code> ...</code>
   <code> ...</code>
   <code> <div class="elem-4" style="clear:left"></div></code>
   </div>
   </pre>
   这种清除浮动的方式很容易理解，浮动会给紧邻的元素造成布局影响，那我在它的紧邻元素上清除掉浮动就好了
   float-4.png
   所以这样，浮动造成的塌陷问题就被解决了，同时，内部的浮动元素还能享受到浮动带来的不一样的横向block排列方式，而不用你去设置<code>display: inline-block;</code>这个属性了，而且inline-block 的设置会有个小缺陷，并排的行内块级元素中间会有大约4px的间距，所以通常又需要<code>margin-right: -4px;</code>来解决这一问题，并不是特别方便，而浮动能帮你轻易的实现这种布局效果
2. 在浮动元素的父元素上添加伪元素清除浮动
   <pre>
   .container:after {
   content: '';
   display: table;
   clear: both;
   }
   </pre>
   这种方法相比较上一种添加一个没太大意义的html元素来说更合理一些，它采用给父元素加伪类的方法来清除子元素浮动带来的布局影响，同样能够达到图float-4的效果，这里需要注意的有两点，1⃣️ content，是伪元素中必须的一个属性，但你可以设一个空值。2⃣️ display的设置，display可以设置成block也可以设制成table，都会有清除浮动的效果，但通常情况下都会设置table，因为相比block，table不容易影响其他页面元素的布局。

上述两种方法都是比较常规的利用clear属性来清除浮动的不同做法，但清除浮动还有的一种做法是构造一个BFC（Block Formatting Context）容器，听起来似乎会比较麻烦，好像很难的样子，但实际并非如此，在下一节会给大家做BFC的介绍，以及用它清除浮动的办法。