CSS布局问题：浮动元素margin-bottom失效及Header元素位置调整

Hey there! Let's break down and fix your two CSS issues with the code you provided.

1. Why isn't margin-bottom working on your floated element? #

First, let's spot a small mismatch in your code: your CSS uses a class selector .container, but your HTML uses an id id="container". That means the overflow: hidden rule (which helps contain floated elements) isn't being applied to your header's container—this is a key reason your margin-bottom on #branding isn't behaving as expected.

Here's the core logic: Floated elements are pulled out of the normal document flow. When you set margin-bottom on a floated element, it won't push down the parent element or subsequent content unless the parent has a way to "clear" the float. Without proper containment, the parent element collapses around the floated content, ignoring its vertical margins entirely.

Fixes you can apply: #

• Fix the container selector mismatch: Change your HTML's <div id="container"> to <div class="container"> so the CSS .container { overflow: hidden; } rule applies. This will make the parent container recognize the floated element's height and margins.
• Use a clearfix if overflow:hidden isn't ideal: If you can't use overflow: hidden (e.g., if you need content to overflow later), add a clearfix pseudo-element to the container:

  .container::after {
    content: "";
    display: table;
    clear: both;
  }
  

• Replace floats with Flexbox (modern alternative): Floats are legacy layout tools—Flexbox gives cleaner control over spacing and alignment without flow issues. For your header, rewrite the CSS like this:

  header .container {
    display: flex;
    justify-content: flex-end; /* Pushes content to the right */
    align-items: center; /* Optional: Vertically centers content */
  }
  

  Then remove float: right from #branding—this eliminates the margin-bottom issue entirely.

2. How to align <h1> and <p> to the right and shift them upward in the header? #

Your float: right already moves the content to the right, but to shift it upward, we need to adjust the spacing in the header. Right now, your header has padding: 65px which adds equal space around all sides, pushing the content down. Here are straightforward fixes:

Option 1: Adjust the header's padding #

Reduce the top padding of the header to move content upward, while keeping left/right and bottom padding consistent:

header {
  background: #ec1480;
  padding: 25px 65px 65px; /* Top, left/right, bottom */
  border-bottom: 3px solid pink;
}

Option 2: Use negative margin on #branding #

If you want to keep the header's padding intact, add a negative top margin to #branding to pull it upward:

header #branding {
  float: right;
  color: white;
  margin-bottom: 40px;
  font-size: 1.5em;
  margin-top: -40px; /* Adjust this value to fine-tune the upward shift */
}

Option 3: Use relative positioning #

Another approach is to position #branding relative to its normal flow position:

header #branding {
  float: right;
  color: white;
  margin-bottom: 40px;
  font-size: 1.5em;
  position: relative;
  top: -40px; /* Shifts the element upward */
}

Pro tip: Don't forget the container fix! #

Making sure .container matches your HTML's class will ensure all your layout rules apply as intended.

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