Css中的float和BFC（Block Formatting Context）《一》

css中的float（浮动）：

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

• float：left，可以让元素向左浮动，元素会浮动到父元素的左边缘，由于脱离了文档流，所以处于正常文档流内的元素会后来居上，相应的浮动元素会盖在位于它之后，且和它处于同一父元素内的元素上面。
  

  // 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;
   }
   

  
  当我给elem-1加上float:left之后，elem-1脱离文档流，且浮动于elem-2之上
  
  

  float-1 添加float之前.png
  
  
  

  float-2 加上float之后.png
  
  如果我给所有elem都加上float：left之后，它们都会脱离文档流，且会按照浮动方向依次排列，一个元素内部所有子元素都处于浮动状态时，父元素会出现塌陷的情况，也就是身体被掏空
  

  // float 3
   .elem-2 {
   width: 100px;
   height: 100px;
   float: left;
   background-color: yellow;
   }
   .elem-3 {
   width: 120px;
   height: 120px;
   float: left;
   background-color: red;
   }
   

  
  
  

  float-3.png
  
  但注意到元素float：left之后，虽然脱离文档流，但还是会浮动到content的边缘，并不会超出padding
• 浮动的结果
  元素的浮动会在页面布局的过程中很方便，但造成的影响有时也会让人很头疼，元素塌陷就是其中一个弊端。
  由上面的例子可以看出，元素的浮动，会影响到其后相邻的元素（elem1浮动于elem2上，盖住了elem2的内容），同时浮动会造成的一个结果就是产生一个BFC的context, 这个我们之后在继续说明BFC是个什么鬼
• 清除浮动
  为了处理由于用了浮动，一时开心而埋下的隐患，你就必须得知道清除浮动的一些方法。
  常用的一些方法有

1. 在其相邻元素上加上clear:left/right/both;这个css样式，
   

   
    
   
     ...
     ...
     ...
     
   
    
    

   
   这种清除浮动的方式很容易理解，浮动会给紧邻的元素造成布局影响，那我在它的紧邻元素上清除掉浮动就好了
   
   

   float-4.png
   
   所以这样，浮动造成的塌陷问题就被解决了，同时，内部的浮动元素还能享受到浮动带来的不一样的横向block排列方式，而不用你去设置display: inline-block;这个属性了，而且inline-block 的设置会有个小缺陷，并排的行内块级元素中间会有大约4px的间距，所以通常又需要margin-right: -4px;来解决这一问题，并不是特别方便，而浮动能帮你轻易的实现这种布局效果
2. 在浮动元素的父元素上添加伪元素清除浮动
   

   
    .container:after {
    content: '';
    display: table;
    clear: both;
    }
    

   
   这种方法相比较上一种添加一个没太大意义的html元素来说更合理一些，它采用给父元素加伪类的方法来清除子元素浮动带来的布局影响，同样能够达到图float-4的效果，这里需要注意的有两点，1⃣️ content，是伪元素中必须的一个属性，但你可以设一个空值。2⃣️ display的设置，display可以设置成block也可以设制成table，都会有清除浮动的效果，但通常情况下都会设置table，因为相比block，table不容易影响其他页面元素的布局。

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