高度塌陷与BFC、清除浮动影响

• 高度塌陷
  当父元素没有设置高度时，父元素的高度是由子元素内容撑开。
  当子元素设置浮动后，就会脱离文档流。父元素的高度就会为0，这就是造成高度塌陷。
  下面的元素就会上移，这就会打乱页面的布局，为了防止这种情况我们需要对元素设置BFC
• BFC （bloce format content）块级格式化内容
  css隐藏的一个属性，开启BFC元素将变成一个独立的布局区域。
  • 开启BFC的特点：
    • 父元素不会被子元素覆盖。边框不重叠
    • 父元素与子元素的外边距不会重叠
    • 父元素完全包含子元素的外边距、边框、内边距、内容区

    如图

• 开启BFC常用的方式：
  设置父元素overflow属性的值为hidden

  overflow:hidden;
  

• BFC其他实例
  当第一个元素设为浮动，第二个元素不想被覆盖，除了也设置为浮动，也可以开启BFC。
  
  当子元素设置外边距时，不想改变父元素的位置，我们也可以开启BFC
  
• clear
  清除浮动元素对本元素及下方元素的影响
  属性值：
  left 清除左侧浮动元素的影响
  right 清除左侧浮动元素的影响
  both 清除两侧浮动元素最大影响的这边
  原理：
  当浏览器检测到上方为浮动元素后，会在本元素添加等高长度的上边距
  
• 伪元素防止高度塌陷与外边距重叠
  可以通过给浮动元素设置::after伪元素来防止高度塌陷

  .box1::after{
  	content:"";
  	display:block;
  	clear:both;		
  }
  

  通过给子元素设置::before伪元素来防止外边距重叠

  .inner::before{
  	content:"";
  	display:table;
  }
  

  也可以同时设置来解决高度塌陷与外边距重叠

  .clearfix::before,
  .clearfix::after{
  		content:"";
  		display:table;
  		clear:both;
  }