Fix styling for code blocks with copy buttons next to floated content

Make the wrapper div for code block create a block formatting
context. This changes how floated content is laid out: previously
the wrapper was taking 100% width and tried to wrap text around the
floated content, now its width is limited by the width of floated
content. This way absolutely positioned elements inside the code
block (like the copy buttons) won't overlap the floated content.
We've had this problem before when adding line numbers (T272853),
and the workaround we used there won't work for the copy buttons.
It also lets us remove the background-color override, previously
needed to avoid it leaking outside the code block (T126010).

Bug: T40932
Change-Id: I7f51ea78d7fcf07358c6ee45275b2bae2e1cbeb8

modules/pygments.copy.less

@@ -5,10 +5,6 @@
  * Original author: Krinkle
  */
 
-.mw-highlight-copy {
-	position: relative;
-}
-
 /**
  * https://doc.wikimedia.org/oojs-ui/master/demos/ (2023-11-13)
  * https://design.wikimedia.org/style-guide/components/buttons.html

modules/pygments.wrapper.less

@@ -3,22 +3,24 @@
 .mw-highlight {
 	unicode-bidi: embed;
 
+	div& {
+		// Position absolutely positioned elements relative to this container.
+		position: relative;
+		// Create a block formatting context so that the code block's background and
+		// absolutely positioned elements inside it (line numbers, copy button)
+		// do not overlap floated elements outside of it (e.g. image thumbnails, infoboxes).
+		// See T126010, T272853, T40932#10211022.
+		display: flow-root;
+		// Move the margin from the nested pre, as the block formatting context prevents margin collapsing
+		margin: 1em 0;
+	}
+
 	pre {
+		margin: 0;
 		/* Use a more commonly found tab size of 4 (e.g. as used in CodeEditor)
 		instead of the browser-default value of 8 */
 		-moz-tab-size: 4;
 		tab-size: 4;
-		// Position .linenos relative to this container.
-		// Do not put this on the main container as it is 100%
-		// and causes it to stack above floated elements (T272853)
-		position: relative;
-	}
-
-	/* The nested pre already has a background. T126010 */
-	.mw-highlight& { /* Increase specificity to override the Pygments generated style in dark mode */
-		div& {
-			background-color: inherit;
-		}
 	}
 
 	/* Avoid displaying double borders for nested 'code' elements.