1、弹性盒子模型（FlexBox），不考虑兼容性问题的情况下，建议新手直接使用这种模式，简单，最重要的是元素不会浮动，不会影响后面的元素的布局，比如下面代码中的我在底层这个div的显示没有任何影响。
<html>
<head>
<style>
#tasklist{
background-color:gray;
display: flex;
}
.item{
margin-right: 20px;
}
</style>
</head>
<body>
<div id="tasklist">
<div class="item">任务汇总</div>
<div class="item">审核统计</div>
</div>
<div>我在底层</div>
</body>
</html>
2、块浮动，从效果图上看，我在底层这个div已经漂浮上来，也就是对块浮动对后面的元素产生影响，另外需要对每个div元素都需要设置浮动属性
<html>
<head>
<style>
#parent{
background-color:blueviolet;
}
.leftfloat{
float: left;
background-color: chartreuse;
}
.rightfloat{
float: right;
background-color: orange;
}
</style>
</head>
<body>
<div id="parent">
<div id="first" class="leftfloat">任务汇总</div>
<div id="second" class="rightfloat" >审核统计</div>
</div>
<div>我在底层</div>
</body>
</html>
对于上面的情况，需要清除浮动，下面是修改后的代码和效果图，总的来说，没有flexbox方便
<html>
<head>
<style>
#parent{
background-color:blueviolet;
}
.leftfloat{
float: left;
background-color: chartreuse;
}
.rightfloat{
float: right;
background-color: orange;
}
.clearfloat{
clear: both;
}
</style>
</head>
<body>
<div id="parent">
<div id="first" class="leftfloat">任务汇总</div>
<div id="second" class="rightfloat" >审核统计</div>
</div>
<div class="clearfloat">我在第1个底层</div>
<div class="clearfloat">我在第2个底层</div>
</body>
</html>
