前端面试题万万千，每每感觉准备的差不多的时候总会出现奇怪的题型，大家还得提升自己，互相学习呀。

在网页布局中，浮动元素脱离了文档流，可能会导致父元素高度塌陷等问题，所以出现了清理浮动的需求。

使用clear属性

在元素末尾添加一个空的div，设置属性 clear: both;

这个属性的作用就是清除元素左右两边的浮动。

使用overflow属性

父元素添加 overflow：hidden；

伪元素清除法（推荐方案）

父元素添加上面的class，这个方法不同添加额外的空元素。

父元素浮动法

display: flow-root（最新方案）

这个方法比较新颖，答出来会让面试官感觉你是持续跟进技术一线的。

看到这里大家可能会觉得这不是众所周知的东西么，冷不防的居然会问：

overflow: hidden 为什么能实现清理浮动的效果？

• 什么是块级格式化上下文：BFC 是 Web 页面中盒模型布局的 CSS 渲染模式，它是一个独立的渲染区域，规定了内部元素如何布局，以及与外部元素的相互关系和作用。
• BFC 的特点内部的盒子会在垂直方向上一个接一个地排列。BFC 区域不会与浮动元素重叠。BFC 是一个独立的容器，内部元素的布局不会影响到外面的元素，反之亦然。计算 BFC 的高度时，会包括浮动元素的高度。
• 清除浮动的原理：当一个元素设置了overflow:hidden后，它就创建了一个 BFC。根据 BFC 的特点，其内部的浮动元素会参与 BFC 的高度计算，从而使包含浮动元素的父元素能够正确地计算出高度，避免了因浮动导致的父元素高度塌陷问题，也就达到了清除浮动的效果。

以前不太理解的BFC, 可算是明白了，大家共勉。