justsoso_o 2022-10-12 17:42 采纳率: 100%
浏览 24
已结题

盒子的浮动问题,为什么会这样排列?

同花顺笔试遇到的一题,不太懂

问盒子之间的排列关系是怎样的, 代码:


<div style="display: inline;">111</div>
<div style="display: inline-block;">222</div>
<div style="float: left;">333</div>
<div style="display: inline-block;">444</div>
<div style="float: left;clear: both;">555</div>
<div style="float: left;">666</div>

结果如下图

img

我的理解:
111、222、444设置了行内/行内块类型,display:inline-block会形成BFC,不会与浮动元素重叠,所以333设置浮动后不会与1、2、4重叠,会飘到最左边。555也设置浮动,原本会排在333右边,但是设置了清除左右浮动,所以相当于一个独立块?独占一行?
然后666本来也应该浮动到333的右边,但是由于555清除了浮动,所以被隔到下边了?

  • 写回答

1条回答 默认 最新

  • 佚名程序员 2022-10-12 18:54
    关注

    111,222,444变成行内/行内块类型,
    333是块元素占一行,
    333浮动后,由于上方没有块元素,左边是行内元素可跨越,于是就向上向左移动,独占一行位置
    555,666两个都是块类型占一行,
    555清除浮动后,上面被333占3行了就显示在第二行,
    666开始左浮动,上面被333占显示在第二行,左边被555(块元素)占位不能左移

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月23日
  • 已采纳回答 10月15日
  • 创建了问题 10月12日

悬赏问题

  • ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写,需写出详细代码,代价私
  • ¥15 ROS系统搭建请教(跨境电商用途)
  • ¥15 AIC3204的示例代码有吗,想用AIC3204测量血氧,找不到相关的代码。