无需父容器如何实现3个div并排等宽布局

你遇到的是浮动元素的高度塌陷经典问题：设置float: left的元素会脱离正常文档流，浏览器无法计算这部分元素的总高度，就会导致后续正常流的内容跑到浮动元素下方、甚至被遮盖的问题。

方案1：用inline-block替代float（推荐，无浮动副作用） #

完全放弃float属性，用inline-block实现并排，元素仍在正常文档流内，会自动撑起高度，不会影响后续内容：

• 每个div需要添加的核心属性：
  • 宽度width: 33.3333%（对应你用的工具类w-1/3）
  • 布局模式display: inline-block
  • 顶部对齐vertical-align: top 避免不同高度的div错位
  • 盒模型box-sizing: border-box 避免边框、padding撑大宽度导致换行

如果用Tailwind工具类的话，代码如下：

<div class="w-1/3 inline-block align-top box-border flex flex-row"></div>
<div class="w-1/3 inline-block align-top box-border flex flex-row"></div>
<div class="w-1/3 inline-block align-top box-border flex flex-row"></div>

如果遇到三个div总宽度超过100%换行的情况，是因为inline-block默认会识别HTML标签之间的空白字符，你可以把三个div的标签写在同一行，或者给这三个div的父元素（默认是body）设置font-size: 0，再给div内部恢复需要的字体大小即可。

方案2：保留float，手动清除浮动影响 #

如果一定要用float实现，不需要额外加外层容器，只需要处理浮动对后续内容的影响即可，有两种可选处理方式：

• 方式1：给三个div之后的第一个正常内容元素添加clear: both属性，告诉浏览器这个元素要避开所有浮动区域，不会跑到浮动元素下方。如果用Tailwind直接加clear-both类即可。
• 方式2：给最后一个浮动div添加清除浮动的伪元素，不需要修改其他元素：
  先定义公共clearfix样式：

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  

  再给最后一个div加上这个类即可：

  <div class="w-1/3 float-left flex flex-row"></div>
  <div class="w-1/3 float-left flex flex-row"></div>
  <div class="w-1/3 float-left flex flex-row clearfix"></div>
  

所有div都必须开启box-sizing: border-box，否则如果你给div加了边框、内边距，实际宽度会超过33.3333%，导致第三个div换行掉到下一行。

内容的提问来源于stack exchange，提问作者kingofeverything