I know that some people will be like "I Don't Want Workarounds, I Want Pictures Of Spider-Man!"
But here's some possible ways to "clear a float" which in my experimentation with Developer Tools and Win/Chrome, seems to resolve the "clip" and "float" conflict.
Note, I am using square brackets instead of angle brackets for this bug forum in case it does weird HTML rendering. You will need to replace the square brackets with angle brackets.
1. Add a [br style="clear: both"] after the image and text.
This is the "trick" used in this post:
https://cohost.org/belarius/post/1257995-de-historia-choscium
2. Wrap the section in a [div style="overflow: hidden"] ... [/div].
Does have the potential to have some unexpected behavior.
3. Consider using Flexbox.
Use this tool. Set it to 2 images to get a side-by-side look even if you're only using 1 image. Add your image and caption. Copy the HTML.
https://nex3.github.io/cohost-image-grid/
Look for the [figure] and change the "flex-flow" to "row". And add "align-items: center".
Bonus, you will no longer need to use [br] to vertically center text and it will have lots of amazing semantic HTML.
One possible solution available to the Developers not available to Users is to use the old "before" and "after" table clearfix trick. The forced overflow hidden solution would probably break CSS Crimes since the inner divs have some padding applied to them. I don't know if any of the more complicated Crimes will break with float clearing in general.
dohz
Floating images no longer display as expected, appearing to cut off wherever the text ends, and not displaying at all in the absence of text. This happens on Firefox and Chrome on my PC and on Safari on my iPhone. I've attached images of a couple of my posts that have been affected (the posts pictured are this and this, and many more have been affected).
1 person has this problem