前端知识点（一）：BFC(块级格式化上下文)+清除浮动

1.BFC---块级格式化上下文

只有块级元素能触发BFC,触发了BFC的盒子是一个独立布局的容器，内容元素和外部元素不会互相影响。

（1）触发BFC的方式

• 根元素
• 浮动                                                float:left/right;
• 固定或绝对定位                              position:absolute/fixed;
• overflow不为visible                        overflow:hidden/auto;
• display:为表格布局或者弹性布局   display:inline-block/table-cell/table-caption/flex/inline-flex;

 （2）BFC应用

• 避免边距重叠
• 清除浮动
• 实现两栏自适应布局

2.浮动

（1）浮动（float）

特点：使元素脱离标准流

作用：使块级元素排成一排；使文字围绕着浮动图片；

（2）清除浮动的方式

清除浮动是为了解决父元素因为子元素浮动引起的内部高度为0（高度塌陷）的问题。

高度塌陷：当所有子元素浮动时，且父元素没有设置高度，这时父元素就会产生高度塌陷。

（1）给父元素单独设置高度

缺点：无法进行自适应布局

（2）父级设置overflow:hidden;zoom:1(针对ie6)

缺点：布局上需注意溢出部分被隐藏

(3)给浮动元素后面添加一个空标签。clear:both;height:0;overflow:hidden;

缺点：添加空标签，不利于页面优化

(4)父级设置overflow:auto;

缺点：内部元素宽高超过父级元素，会出现滚动条

(5)给父元素添加伪类对象(万能清除法)

.father :after { 
    contain: '随便写';
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }