前言：知识虽小，但很实用【目标：每日更新+1...】
一、清除浮动
- 1.概念：解决因为子元素设置浮动，父元素高度=0，导致底部元素上移，恢复原有的占位，父组件的高度；
- 2.适用场景：两栏布局、商品列表、左右排列
- 3.清除浮动~举例说明：
这是默认父元素内，包裹两个子元素，子元素浮动设置后，父元素失去高度，底下元素自然现实到上面来了
给父组件追加一个容器，并设置清除浮动操作：clear: both
-
4 浮动为什么会造成高度塌陷？
答 ：元素一旦设置 float（left /right），它就会 "飘起来"，脱离正常文档流！飘起来 = 不在父盒子里面占位置了，父盒子发现：我的子元素不见了 → 高度自动变成 0
这就叫 高度塌陷，因为父盒子高度变成 0 ，下面的元素就会自动往上补位置。
-
5.为什么底部会被顶上去？
因为父盒子高度变成 0 了下面的元素就会自动往上补位置
所以：浮动塌陷 → 父盒子没高度 → 底部内容冲上来
-
6.清除浮动到底在做什么？
clearfix 做的事情很简单：在父盒子最后，偷偷加一个看不见的小元素，
让它把两边的浮动都 "顶住"，
强制告诉父盒子：
你有高度，你必须把浮动元素包起来！
原理：clear: both → 不允许左右有浮动→ 强行撑开父盒子