> 清除浮动比较简单，但这里要答出BFC，BFC是必考的，你要说你没听说过，那就直接pass了 1.父级定义伪类:after和zoom: 浏览器支持好，不容易出现怪问题, 代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持 ``` .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1} ``` 2.添加空div标签:clear:both 添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度.不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽 3.父级定义height 父级div手动定义height，就解决了父级div无法自动获取到高度的问题,但只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。 4.父级定义overflow:hidden/auto 必须定义width或zoom:1，同时不能定义height，只推荐没有使用position或对overflow理解比较深的同学使用,注意滚动条！ > *BFC （*块级格式化上下文*）*，是一个独立的渲染区域，让处于`BFC`内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 *触发条件:* * 根元素 * `position: absolute/fixed` * `display: inline-block / table` * `float`元素 * `ovevflow !== visible` *规则:* * 属于同一个`BFC`的两个相邻`Box`垂直排列 * 属于同一个`BFC`的两个相邻`Box`的`margin`会发生重叠 * `BFC`的区域不会与`float`的元素区域重叠 * 计算`BFC`的高度时，浮动子元素也参与计算 * 文字层不会被浮动层覆盖，环绕于周围