Material UI+Tailwind实现图片位于文本右侧，float-right不生效如何解决？

失效原因 #

<h1>属于块级元素，默认会独占整行宽度，你之前把图片放在h1标签之后、或者父容器外部，都无法和h1内的文本实现并排效果。

可行解决方案 #

方案1：沿用float实现（支持文本环绕图片）

只需要把图片标签放到h1标签前面即可，浮动元素会脱离常规文档流，后方块级元素的文本会自动环绕浮动元素排布：

<div style={{marginLeft: 20, wordWrap: "break-word", width: 350}}>
  <img className="float-right ml-4 mb-2" alt="test" src="https://dummyimage.com/100"/>
  <h1 className="text-4xl font-bold">Vivamus suscipit tortor eget felis porttitor.</h1>
</div>

代码里额外加的ml-4是给图片左侧预留间距，避免和文本紧挨；mb-2是给图片底部预留间距，避免文本过短的时候浮动元素超出父容器高度，你可以根据实际需求调整数值。

方案2：Flex布局实现（更稳定，无浮动副作用）

如果不需要文本环绕图片，只是想要文字和图片左右并排展示，用Flex布局更易维护，也不会出现浮动带来的高度塌陷问题：

<div style={{marginLeft: 20, width: 350}} className="flex items-start gap-4">
  <h1 className="text-4xl font-bold break-words flex-1">Vivamus suscipit tortor eget felis porttitor.</h1>
  <img alt="test" src="https://dummyimage.com/100"/>
</div>

其中flex-1会让h1占满容器剩余宽度，break-words实现你原本需要的自动换行效果，items-start让文字和图片顶部对齐，如果需要垂直居中可以替换为items-center。

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