css知识点——清除浮动

什么是清除浮动

清除浮动的意思是清除元素浮动造成的影响。

那么什么是浮动呢？

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素才会停下来。

float属性值：left、right、none

为什么要清除浮动

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时
候父元素就会产生高度塌陷，所以这个时候我们需要清除浮动

怎么样清除浮动

1. 使用带 clear 属性的空元素在浮动元素后使用一个空元素如<div class=“clear”></div>，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。
2. 使用AFTER伪元素，通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。
3. 通过BFC
4. 给浮动的元素的容器添加浮动，给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用

什么是BFC

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，一个独立的渲染区域，规定了内部如何布局，里面的元素和外部的元素相互不影响。

BFC的作用

• 清除浮动

• 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

怎么实现BFC

• html 根元素
• float 浮动
• position为absolute或者fixed的元素
• overflow 不为 visiable
• display 为表格布局或者弹性布局

解释：
当元素设置了 overflow 样式且值不为 visible 时，该元素就构建了一个 BFC，BFC 在计算高度时，内部浮动元素的高度也要计算在内，也就是说即使 BFC 区域内只有一个浮动元素，BFC 的高度也不会发生塌缩，所以达到了清除浮动的目的

推荐阅读这篇文章：https://www.jianshu.com/p/0d713b32cd0d