我可以将元素浮动到其段落的顶部吗？

Question

我正在尝试找到一种将图像浮动到其后段落的top的方法。它必须在HTML中的段落文本之后[[after，以便屏幕阅读器和小屏幕（由于媒体查询而导致图像未浮动）在段落文本之后才能看到图像。我可以将<img>放在<p>的内部或外部，但是必须在文本之后。

是否有一种方法可以使图像显示在段落文本的右上角，并且仅使用CSS就能使段落文本适当地环绕在图像上？

[...document.querySelectorAll('img')].forEach(img => {
  const rand = Math.floor(Math.random() * 300 + 100);
  img.setAttribute('src', `https://placekitten.com/150/${rand}/`);
  img.setAttribute('height', rand);
});

img {
  float: right;
  width: 150px;
  height: auto;
}
body {
  display: flex;
}

<div class="inside">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere odio in tincidunt posuere. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat.
    <img src="https://placekitten.com/150/200" width="150" height="200" alt="Cat">
  </p>
</div>

<div class="outside">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere odio in tincidunt posuere. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat.
  </p>
  <img src="https://placekitten.com/200/200" width="200" height="200" alt="Cat">
</div>

Answer 1

[主意是考虑将图像用作背景的浮动伪元素：

img {
  float: right;
  width: 150px;
  height: auto;
}
.outside:before {
  content:"";
  float:left;
  width:150px;
  height:150px;
  background-image:url(https://placekitten.com/150/150/);
}
body {
  display: flex;
}

<div class="outside">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere odio in tincidunt posuere. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat.
  </p>
  <img src="https://placekitten.com/150/150" width="200" height="200" alt="Cat">
</div>