float和display:inline-block 都能使两个块形元素并排
下面是div部分代码
<body>
<div class="all">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bott"></div>
</body>
使用float时结果是
*{
padding: 0;
margin: 0;
}
.left{
width: 50%;
height: 100px;
float: left;
background: red;
}
.right{
width: 50%;
height: 100px;
float: left;
background: blueviolet;
}
使用float后相当于界面分成了上下两层,使用float浮动于上一层,会覆盖下一层的颜色
.left{
width: 50%;
height: 100px;
background: red;
float: left;
}
.right{
width: 50%;
height: 150px;
background: blueviolet;
float: left;
}
.bott{
height: 200px;
background: orange;
}
并且改变行高时,不会撑起一行,把right和left加上透明度后,可以清楚的看到位于下层的all和bott部分,以及浮动与上层的letf
.left{
width: 50%;
height: 100px;
background: red;
float: left;
opacity: 0.5;
}
.right{
width: 50%;
height: 150px;
background: blueviolet;
float: left;
opacity: 0.5;
}
.bott{
height: 200px;
background: orange;
}
.all{
height: 125px;
background: greenyellow;
}
如果直接把float换成display:inline-block 并不能形成并排效果
如果改变宽度值,才能形成并排效果,因为使用块与块之间会有间隙
*{
padding: 0;
margin: 0;
}
.left{
width: 50%;
height: 100px;
display:inline-block;
background: red;
}
.right{
width: 49%;//宽度改变
height: 100px;
background: blueviolet;
display: inline-block;
}
如果改变行高时,display:inline-block 会撑开一行
.left{
width: 50%;
height: 100px;
background: red;
display: inline-block;
}
.right{
width: 49%;
height: 150px;
background: blueviolet;
display: inline-block;
}
.bott{
height: 100px;
background: orange;
}
如果把all加上背景色而不设置宽度,display能撑开div块,而float不能
.left{
width: 50%;
height: 100px;
background: red;
display: inline-block;
}
.right{
width: 49%;
height: 150px;
background: blueviolet;
display: inline-block;
}
.bott{
height: 100px;
background: orange;
}
.all{
background: greenyellow;
}