一天搞定CSS: 浮动(float)与inline-block的区别--11
浮动:
使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来。
inline-block:
inline-block是指行内块元素,它具有行内元素和块元素两者的特点,可以实现对元素的有序排序。
两者的区别
两者主要区别在于当标签的【高度不一致】时,体现出的差异
如果高度不一致的情况下,想让他们按顺序排列就可以选择inline-block
1)浮动时代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
width: 300px;
font-size: 0;
}
li{
list-style: none;
width: 100px;
height: 150px;
background: green;
font-size: 40px;
text-align: center;
line-height: 150px;
color: #fff;
float: left;
/*float: right;*/
/*display: inline-block;*/
}
</style>
</head>
<body>
<!--
如果高度不一至的情况下,想让他们按顺序排列就可以选择inline-block
-->
<ul>
<li>1</li>
<li style="height: 200px;">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
效果图:
2)使用inline-block时代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
width: 300px;
font-size: 0;
}
li{
list-style: none;
width: 100px;
height: 150px;
background: green;
font-size: 40px;
text-align: center;
line-height: 150px;
color: #fff;
/*float: left;*/
/*float: right;*/
display: inline-block;
}
</style>
</head>
<body>
<!--
如果高度不一至的情况下,想让他们按顺序排列就可以选择inline-block
-->
<ul>
<li>1</li>
<li style="height: 200px;">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
效果图:
总结:
在浮动时,若第一个元素的高度大于第二个元素的高度,第三个元素浮动时,会与第二元素并排在一列中,这样不能出现有序排列了。
在inline-block时,就算第一个元素的高度大于第二个元素的高度,第三个元素也不会与第二个元素排在一列。
【这里第一二三个元素,不是指第一二三个元素,只是为了说明三个元素的关系】