高度塌陷和BFC、Clear、Clearfix、高度塌陷和外边距重叠的解决方案

高度塌陷

• 在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，会完全脱离文档流，导致无法撑开父元素，致使父元素的高度丢失
• 父元素高度丢失后，会改变页面的布局，所以必须修正
  

BFC（块级格式化环境）

• BFC使一个CSS中的隐藏属性，可以为一个元素开启BFC；为元素开启BFC后，该元素会变成一个独立的布局区域
• 元素开启BFC的特点：
  – 1、开启BFC的元素不会被浮动元素所覆盖
  – 2、开启BFC的元素子元素和父元素外边距不会重叠
  – 3、开启BFC的元素可以包含浮动的子元素
• 开启BFC的方式：
  – 1、设置元素的浮动（不推荐）
  – 2、将元素设置为行内块元素（不推荐）
  – 3、将元素的overflow设置为一个非visible的值，
  通常设置为overflow：hidden开启BFC

clear

• 作用：清除浮动元素对当前元素所产生的影响
• 可选值:
  – left 清除左侧元素对当前元素的影响
  – right 清除右侧元素对当前元素的影响
  – both 清除两侧中影响最大的一侧影响
  原理： 设置清除浮动以后，浏览器会自动为元素添加一个上外边距，使该元素不受其他元素的影响。
  
  
  

clearfix

• 这个样式可以同时解决高度塌陷和外边距重叠的问题
  
  

解决代码：

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

高度塌陷的最终的解决办法（无副作用版本）

1、运用clear解决：

由于要做一个讲究人，所以CSS的工作就尽量交给CSS。不麻烦HTML所以就有了以下的方法：
2、运用after伪类来解决高度塌陷的问题