justsoso_o 2022-10-12 17:42 采纳率: 50%
浏览 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 浏览器时间循环 交互事件和延时事件的 优先级与执行问题
  • ¥15 GD模块安装出错,libgd无法正常安装
  • ¥20 求有缘人帮我把笛卡尔坐标系转换为经纬度 有偿
  • ¥15 vue2中使用计算属性
  • ¥50 远程桌面打开Mastercam、没有许可证、物理机打开正常
  • ¥15 ubuntu安装gdal后java读取tif文件报错
  • ¥15 请问lammps怎么做两种金属连接的原子浓度分布图
  • ¥15 求jacquard数据集
  • ¥15 w10部分软件不能联网
  • ¥15 关于安装hbase的问题(操作系统-windows)