CSS新手求助：如何使用CSS水平对齐指定的两个容器

Hey there! Let's break down why your display: block and margin properties aren't working as expected, and get those black (#fourth) and red (#five) divs aligned properly.

What's Causing the Issue? #

• Floats break normal document flow: Your #first and #third divs use float: left, which pulls them out of the regular page layout flow. When you add #fourth and #five also with float: left, they try to squeeze into any available space next to the earlier floated elements—this is why you're seeing that crossed, almost parallel arrangement.
• display: block does nothing for floats: Floated elements are already block-level by default, so adding display: block doesn't change their positioning behavior at all.
• Margins behave oddly on floated elements: Since floated elements don't occupy vertical space in the document flow, margin-bottom on earlier elements won't push #fourth and #five down like you'd expect.

The Fix #

To align #fourth and #five (either side-by-side on a new line or stacked), we first need to clear the floats from the previous elements, then adjust their styling:

Step 1: Clear Floats for #fourth

Add clear: both; to #fourth—this forces it to start on a new line below all previously floated elements, which is the key to fixing the layout chaos.

Step 2: Adjust Margins for Alignment

• If you want #fourth and #five to sit side-by-side: Keep their float: left properties and add a small margin between them for spacing.
• If you want them stacked vertically: Remove float: left from one or both divs.

Here's the modified CSS for these two divs:

div#fourth {
  clear: both; /* Critical: Resets the flow after earlier floats */
  background-color: black;
  height: 100px;
  width: 100px;
  margin-left: 5px;
  float: left; /* Keep this for side-by-side alignment */
}

div#five {
  background-color: red;
  height: 100px;
  width: 100px;
  float: left; /* Keep this for side-by-side alignment */
  margin-left: 5px; /* Adds space between the black and red divs */
}

Full Updated CSS (for quick testing)

Here's the complete working CSS code you can replace your current version with:

div#first { background-color: #FF0000; height: 180px; width: 180px; float: left; position: relative; }
div#third { background-color: blue; height: 180px; width: 190px; float: left; margin-left: 190px; position: relative; }
div#fourth { clear: both; background-color: black; height: 100px; width: 100px; margin-left: 5px; float: left; }
div#five { background-color: red; height: 100px; width: 100px; float: left; margin-left: 5px; }
div#six { background-color: navy; height: 100px; width: 100px; float: left; margin-left: 400px; }
div#hello1 { background-color: navy; width: 80px; height: 100px; position: absolute; bottom: 90px; }
div#hello2 { background-color: orange; width: 200px; height: 100px; bottom: 90px; margin-left: 85px; position: absolute; }
div#hello3 { background-color: red; width: 130px; height: 100px; position: absolute; bottom: 90px; margin-left: 290px; }
div#hello4 { background-color: navy; width: 150px; height: 100px; position: absolute; bottom: 90px; margin-left: 425px; }

Bonus Tip for Easier Layouts #

Floats were originally designed for wrapping text around images, not for building full page layouts. If you're open to learning newer tools, Flexbox or CSS Grid would make alignment way simpler and less error-prone. For example, wrapping #fourth and #five in a container with display: flex; would let you align them perfectly with just a couple lines of code.

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