块框,可以认为是块级元素(如div、h1)的内容区 + 内边距
行内框可以认为是行内元素(如span)的内容区 + 内边距
当 块级框/行内框 和一个浮动元素重叠时，行内框的边框、背景和内容都在幅度元素之上，块级框的边框和背景都在浮动元素的下面，但内容在浮动元素的上面。

见下图

可以很明显的看到,框级框(h2#jump-up)在与图片重合时,其背景和边框全部,全部在浮动元素(img.sideline)的下面,而文本元素在上面.
对于行内框(px.box strong)来说,其背景、边框和文字(也叫前景)全在浮动元素上面

代码如下:

//css
img.sideline {float: left;margin: 10px -15px 10px 10px;}
p.box {border: 1px solid gray; padding: 0.5em;}
p.box strong {border: 3px double black; background: silver; padding:2px;}
h2#jump-up {margin-top: -30px; background: silver;border:1px solid red;}

<img src="/statics/images/course/klematis2_small.jpg" class="sideline">
<p class="box">
This paragraph, unremarkable in most ways, does contain an inline element.
This inline contains some <strong>strongly emphasized text, which is
so marked to make an important point</strong>. The rest of the element`s
content is normal anonymous inline content.
</p>
<h2 id="jump-up">A Heading!</h2>