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:gray;
}
.leftfloat{
float: left;
background-color: orange;
}
.rightfloat{
float: right;
background-color: orange;
}
.clearfloat{
clear: both;
}
.item{
margin-right: 20px;
}
</style>
</head>
<body>
<div id="parent">
<div id="first" class="leftfloat item" >任务汇总</div>
<div id="second" class="leftfloat item" >审核统计</div>
</div>
<div class="clearfloat">我在第1个底层</div>
<div class="clearfloat">我在第2个底层</div>
</body>
</html>