塊框,可以認為是塊級元素(如div、h1)的內(nèi)容區(qū) + 內(nèi)邊距
行內(nèi)框可以認為是行內(nèi)元素(如span)的內(nèi)容區(qū) + 內(nèi)邊距
當 塊級框/行內(nèi)框 和一個浮動元素重疊時，行內(nèi)框的邊框、背景和內(nèi)容都在幅度元素之上，塊級框的邊框和背景都在浮動元素的下面，但內(nèi)容在浮動元素的上面。

見下圖

可以很明顯的看到,框級框(h2#jump-up)在與圖片重合時,其背景和邊框全部,全部在浮動元素(img.sideline)的下面,而文本元素在上面.
對于行內(nèi)框(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>

總結(jié)

以上是生活随笔為你收集整理的css --- 浮动元素与 块框/行内框重叠时的细节的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。