Before I go any further let's make sure we are all talking about the same component here, because sometimes the terminology in itself can be confusing already (pop-outs, pop-overs, overlays, ...). For me a flyout consists of a handler and a content blob that appears when triggered by certain events (typically clicks or hovers) and only eclipses that part of the page where it resides. In this it differs from what I call an overlay, as overlays eclipse the entire page below, effectively forcing you to focus on the content in the overlay.
We make use of flyouts because we want to hide certain pieces of content from plain view, only allowing access to the data when the user specifically asks for it. A flyout is a practical way to clear up content clutter that is only needed in some particular situations but should still be available on demand instantly. They came into fashion when people started making flyout menus (usually displaying the 2nd-level navigation on hover), but they've spread to accommodate all kinds of content (help messages on form inputs, pictures references on maps, login forms in page headers, ...).
why flyouts suck
So what would be the ideal mark-up? Well, let's look at a real-life example first. If you look at Google Maps and you flag the picture view, you'll see a map overlaid with a lot of images. Click the thumb and a flyout will appear, holding more information about that image. (As it turns out Google just made some changes where the author isn't listed anymore, but the examples below should still makes sense)
<article class="image"> <header> <h1>image heading</h1> </header> <div class="main> <img class="full" src="..." alt="..." /> </div> <footer> <div class="specs">(author etc etc)</div> </footer> </article>
<article class="image" data-pattern="flyout"> <header> <h1>image heading</h1> </header> <div class="main> <img class="full" src="..." alt="..." data-handler="1" data-copy="true" /> </div> <footer> <div class="specs">(author etc etc)</div> </footer> </article>
<div class="flyout"> <div class="header"><img class="full" src="" alt="" /></div> <div class="main"> <article class="image" data-pattern="flyout"> <header> <h1>image heading</h1> </header> <div class="main> <img class="full" src="" alt="" data-handler="1" data-copy="true" /> </div> <footer> <div class="specs">(author etc etc)</div> </footer> </article> </div> </div>
Maybe this all sounds like a lot of overhead, but it does allow us to use the same html data-set for a regular image list and at the same time use it for a map representation (using a flyout for the image details). Not only that, but the untampered html code makes a lot more sense too.
I think I mentioned this before but html5 web components will really come in handy when dealing with techniques like these, so lets hope they'll evolve into an actual standard real soon.