塊框,可以認為是塊級元素(如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>
...)
