CSS布局技术问询：overflow对浮动元素布局的影响、clear属性替代方案及inline-block与block的布局差异

Let's break down your questions one by one, using the sample code you provided as context. First, here's your code formatted for clarity:

<html>
<head>
  <title>Page Title</title>
  <style>
    section, aside, footer {
      border: 1px solid black;
    }
    section {
      width: 50%;
      height: 50px;
      float: left;
    }
    aside {
      width: 30%;
      height: 50px;
      display: block;
      overflow: hidden; /* comment this and see what happens */
    }
    footer {
      width: 10%;
      height: 50px;
    }
  </style>
</head>
<body>
  <section>Section 1</section>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>
</html>

1. Why does the overflow property change the layout, and is the claim that "non-visible overflow clears floats" accurate? #

First, let's clarify what's happening when you set overflow: hidden on the <aside>: this triggers a Block Formatting Context (BFC). A BFC is a self-contained layout environment where internal elements don't interfere with external elements, and vice versa. One key rule of BFCs is that they won't overlap with floating elements outside of them.

Without overflow: hidden, the <aside> is a regular block element. Since <section> is floated left, the <aside>'s content would wrap around the float, but the block itself still takes up the full width of its container—so it ends up appearing below the floated <section>. When you enable overflow: hidden, the BFC forces the <aside> to respect its own width: 30% and not overlap with the floated <section>, which makes them sit side-by-side.

As for the claim that "non-visible overflow clears floats": this is not accurate. Clearing floats (via the clear property) forces an element to sit below all preceding floats. Creating a BFC with overflow does something different—it contains internal floats (if any) and prevents the element from overlapping external floats, but it doesn't "clear" the float in the sense that clear does. The two behaviors are related but distinct.

2. Can we reproduce the layout without using overflow, only with the clear property? #

Short answer: No, you can't. Here's why:

The clear property's sole purpose is to ensure an element does not appear alongside preceding floated elements—it forces the element to start on a new line below the floats. In your sample layout, we want <aside> to sit next to the floated <section>, not below it. Using clear would do the opposite of what we want: it would push <aside> directly below <section>, which is the layout you get when you remove overflow: hidden.

To reproduce the side-by-side layout without overflow, you'd need to use other methods to create a BFC (like display: flow-root on <aside>) or float the <aside> as well (float: left). But relying solely on clear won't achieve this.

3. What's the difference between display: block and display: inline-block in layouts with floats, and does inline-block clear floats? #

Let's break down the differences first:

• display: block: Block elements take up the full available width of their container by default (even if you set a specific width, the remaining space is filled with auto margins). When a block element is placed after a floated element, it will occupy the entire width of the container, so it ends up below the float—its content might wrap around the float, but the element itself doesn't sit alongside it.
• display: inline-block: Inline-block elements are inline-level boxes that can have a set width/height (unlike regular inline elements). They don't take up the full container width, so they can sit alongside other inline-level elements and floated elements. Additionally, inline-block triggers a BFC, which means it won't overlap with external floats—this is why changing <aside> to inline-block (without overflow) makes it sit next to the floated <section>.

As for whether inline-block clears floats: No, it does not. Clearing floats is exclusive to the clear property. inline-block creates a BFC, which prevents the element from overlapping floats, but it doesn't force subsequent elements to sit below floats. If you wanted to clear floats with inline-block, you'd still need to add clear: left (or both) to the element, but that would defeat the purpose of having it sit alongside the float.

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