改变元素的排列方式的时候会用到浮动
浮动的元素会脱离文档流，正常的文档流视其而不见
浮动元素的停止：找到父元素的边框停止
浮动元素的卡顿：元素高度大于其他元素；
2、浮动引发的BUG:
1、父元素不设置高度，所有子元素都浮动
2、浮动的子元素撑不开父元素的高度
3、解决办法：
1、给父元素添加overflow: hidden
2、给父元素添加最后一个子元素 clear：both 清除浮动
3、能设置高度的元素都设置高度
4、伪类元素清除
目标效果：每一排都要顶部对齐
方法：1、块级元素行内显示：display: inline-block
2、顶部对齐：vertical-align: text-top
实现步骤：
1、建立基本元素标签，并设置颜色区分， 设置不同高度来模拟你所说的高度不一致的情况
代码：
效果图：
2、换行：使每个li变成行内块级元素，宽度超过ul宽度时会自动换行
代码：
效果图：
3、顶部对齐：其实第二步已经做到了，是默认的顶部对齐，但经测试有时候不会顶部对齐，如：将文字去掉
所以加上一句：vertical-align: text-top更为保险了。
4、完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{ list-style:none }
.myli {
width: 25px
margin-top: 10px
color: #ffffff
vertical-align: text-top
display: inline-block
}
</style>
</head>
<body>
<ul style="width: 100pxmargin: autoborder: #303030 1px solid">
<li class="myli" style="height: 20px background-color: #666"></li>
<li class="myli" style="height: 40px background-color: rgb(17, 233, 186)"></li>
<li class="myli" style="height: 28px background-color: rgb(11, 87, 226)"></li>
<li class="myli" style="height: 60px background-color: rgb(7, 194, 178)"></li>
<li class="myli" style="height: 10px background-color: #303030"></li>
<li class="myli" style="height: 20px background-color: #bcbe23"></li>
<li class="myli" style="height: 40px background-color: #370d85"></li>
<li class="myli" style="height: 20px background-color: #303030"></li>
</ul>
</body>
</html>
最开始就是这样子啦，可是我脑子一热，想让b浮动(工作中确实会遇到这种情况)，然后float:left，发现父元素没高度了(看起来就像父元素没了)。
就像这样子：
(其实我最开始是发现给了个border-bottom属性，它跑去顶部了)
这种情况，给父元素一个height值就可以了，可是我不能给它一个固定的高度，我想让它随内容的高度变化。
怎么办呢。
诶，我想到一个办法：
我在父元素最后添加了一个空的元素c，用c清空左右浮动，就又回到最开始的效果了，而且动态添加其他元素的话，父元素高度也会像开始那样随之变化了。
