```css
.title-strip{
  background: green;
  margin: 0;
  }
.title1 {
  overflow: hidden;
  }
.title2 {
  float: right;
  }
```

```html
<div>
  <h1 class="title-strip title1">Title1</h1>
  <h1 class="title-strip title2">Title2</h1>
</div>
```

```css
.title-strip {
  background: green;
  margin: 0;
}

.title1 {
  overflow: hidden;
}

.title2 {
  float: right;
}
```

```html
<div>
  <h1 class="title-strip title2">Title2</h1>
  <h1 class="title-strip title1">Title1</h1>
</div>
```

If the first h1 tag has the title1 class and the second has the title2 class, the text is on different lines.  

But when the classes are swapped, the text is on separate lines. Why? 

I read a stack overflow answer saying that 'BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them', the result of words in the same line seems to go against this.  

Am I wrong?