diff --git a/core-blocks/image/editor.scss b/core-blocks/image/editor.scss
index 48f3de5183881..bd8ded9fb0995 100644
--- a/core-blocks/image/editor.scss
+++ b/core-blocks/image/editor.scss
@@ -103,3 +103,36 @@
 		margin: -$border-width;
 	}
 }
+
+// Although the float markup is different in the editor compared to the frontend,
+// this CSS uses the same technique to allow floats in a wide images context.
+// That is, the block retains its centering and max-width, and a child inside
+// is floated instead of the block itself.
+[data-type="core/image"][data-align="center"],
+[data-type="core/image"][data-align="left"],
+[data-type="core/image"][data-align="right"] {
+	.editor-block-list__block-edit {
+		figure {
+			margin: 0;
+			display: table;
+		}
+
+		// This maps to the figcaption on the frontend.
+		.editor-rich-text {
+			display: table-caption;
+			caption-side: bottom;
+		}
+	}
+}
+
+// This is similar to above but for resized unfloated images only, where the markup is different.
+[data-type="core/image"] .editor-block-list__block-edit figure.is-resized {
+	margin: 0;
+	display: table;
+
+	// This maps to the figcaption on the frontend.
+	.editor-rich-text {
+		display: table-caption;
+		caption-side: bottom;
+	}
+}
diff --git a/core-blocks/image/index.js b/core-blocks/image/index.js
index 3cf3ff04e6c93..1dae48c7095ae 100644
--- a/core-blocks/image/index.js
+++ b/core-blocks/image/index.js
@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	createBlock,
@@ -217,15 +218,59 @@ export const settings = {
 			/>
 		);
 
-		return (
-			<figure className={ classes }>
+		const figure = (
+			<Fragment>
 				{ href ? <a href={ href }>{ image }</a> : image }
 				{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+			</Fragment>
+		);
+
+		if ( 'left' === align || 'right' === align ) {
+			return (
+				<div>
+					<figure className={ classes }>
+						{ figure }
+					</figure>
+				</div>
+			);
+		}
+
+		return (
+			<figure className={ classes }>
+				{ figure }
 			</figure>
 		);
 	},
 
 	deprecated: [
+		{
+			attributes: blockAttributes,
+			save( { attributes } ) {
+				const { url, alt, caption, align, href, width, height, id } = attributes;
+
+				const classes = classnames( {
+					[ `align${ align }` ]: align,
+					'is-resized': width || height,
+				} );
+
+				const image = (
+					<img
+						src={ url }
+						alt={ alt }
+						className={ id ? `wp-image-${ id }` : null }
+						width={ width }
+						height={ height }
+					/>
+				);
+
+				return (
+					<figure className={ classes }>
+						{ href ? <a href={ href }>{ image }</a> : image }
+						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+					</figure>
+				);
+			},
+		},
 		{
 			attributes: blockAttributes,
 			save( { attributes } ) {
diff --git a/core-blocks/image/style.scss b/core-blocks/image/style.scss
index 321fc30504bc3..84c5539829a3e 100644
--- a/core-blocks/image/style.scss
+++ b/core-blocks/image/style.scss
@@ -1,5 +1,4 @@
 .wp-block-image {
-	width: fit-content;
 	max-width: 100%;
 
 	img {
@@ -13,20 +12,28 @@
 		text-align: center;
 	}
 
+	// Floats get an extra wrapping aside element, so the figure becomes a child.
+	// Resized images that are not floated, need the caption trick too.
+	.alignleft,
+	.alignright,
 	&.is-resized {
-		width: min-content;
+		display: table;
+		margin: 0;
 
-		// Emulate min-content for Edge and IE11
-		display: -ms-inline-grid;
-		-ms-grid-columns: min-content;
-
-		figcaption {
-			-ms-grid-row: 2;
+		> figcaption {
+			display: table-caption;
+			caption-side: bottom;
 		}
+	}
 
-		img {
-			max-width: none;
-		}
+	.alignleft {
+		float: left;
+		margin-right: 1em;
+	}
+
+	.alignright {
+		float: right;
+		margin-left: 1em;
 	}
 
 	// Supply caption styles to images, even if the theme hasn't opted in.
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 4f86b9100d7b2..8af2d5498da63 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -346,7 +346,6 @@
 		width: 100%;
 
 		// When images are floated, the block itself should collapse to zero height.
-		margin-bottom: 0;
 		height: 0;
 
 		// Hide block outline when an image is floated.
@@ -354,6 +353,9 @@
 			&:before {
 				content: none;
 			}
+
+			// This margin won't collapse on its own, so zero it out.
+			margin-top: 0;
 		}
 
 		// Keep a 1px margin to compensate for the border/outline.