极客观点
项目管理
HarmonyOS
各位大佬，请问下如果父盒子里面有个浮动元素和一个行内块元素，为什么行内块元素会避开浮动元素的空间？而不是占据它的空间（block元素会占据其空间）
代码如下：
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
.box {
width: 500px;
height: 300px;
}
.c1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.c2{
width: 200px;
height: 200px;
background-color: blue;
display: inline-block;
}
效果如下：
先来看下
display属性中不同值的区别：block会使其中的元素放在一个新行上inline会利用当前段落内联显示元素inline-block可以使用width和height限制宽高，同时也会将元素放在它前面的内容旁边再来看下
float布局的说明：float属性允许元素四处移动，使得其他的元素可以环绕在它的周围。回到楼主的代码看下：
c1中float:left表明元素会尽可能的向左移动，以致移动到了左边界。同时div默认是display:block使它能够保持宽高设置。c2中display:inline-block使得它不会从行首开始，将c1环绕，而是将元素放置在c1元素旁边。c2若设置成display:block就会使它从行首开始，将c1包围因此楼主说的 占据c1的空间 不太贴切，应该说是环绕在
c1周围.