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 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测