CSS浮動爲何不會遮蓋同級元素

時間 2020-04-29

標籤 css 浮動爲何不會遮蓋同級元素欄目 CSS 简体版

原文原文鏈接

1.問題描述

在W3CSchool學習web前端時，看完CSS定位-浮動這一節後，感受沒有什麼問題。可是在CSS高級-分類這一節的中進行實踐時，遇到了以下問題。測試地址：浮動的簡單應用。css

完整的html+CSS源碼以下：html

<html> <head> <style type="text/css"> img { border:solid 1px green; display:block; } #id1{ float:left; } div{ border:solid 2px blue; } p{ border:solid 1px red; } </style> </head> <body> <div> <img src="/i/eg_cute.gif" /> <img id="id1" src="/i/eg_cute.gif" /> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div> </body> </html>

呈現效果：
前端

個人問題：
W3CSchool中講解CSS定位，浮動那一節中，明確說對框1進行向左浮動時會遮住框2，緣由是浮動後，元素脫離了文檔流，不佔據空間，想左或向右移動直至左右兩邊碰到包含框的兩邊。爲何我對兩張圖中的之一進行浮動時，不會遮住另外一張圖呢？web

2.個人理解錯在了哪裏

首先，再一次查看W3CSchool官網權威對CSS浮動的講解，詳見：CSS浮動。學習

原文截圖以下：
測試

圖中紅框的這句話，明明說到對框進行浮動時，會脫離文檔流，若向右浮動直到，直到它的右邊框碰到包含框的右邊緣，隨後便說道，若向左浮動，脫離文檔流並向左移動，直到它的左邊緣碰到包含框的左邊緣。由於這樣，就會致使原有的框被浮動的框覆蓋。spa

按照W3CSchool的理解，怎麼也不明白爲何我測試的源碼中，框中的圖片並無覆蓋另外一個框中的圖片呢？3d

W3CSchool是權威教程，正確性經得住考驗，可是有些細節仍是說的不太明確。個人問題就出現上圖中紅框中的那句話。code

這句話容易產生誤導，浮動的框會脫離文檔流，所以不佔用文檔中的空間。可是並不是任何狀況下浮動框向左或向右移動直至左右兩邊碰到包含框的兩邊才中止。若是某個浮動框在移動的過程當中，碰到了包含內容的框時，也會中止。xml

所以，上圖中的紅框中的那句成立的前提是：浮動框在移動的過程當中，碰到框沒有內容或者框內的內容會自我調整位置以防止被覆蓋。好比<p>標籤中的文本遇到浮動的框就自我調整位置，以防止被覆蓋。

相關文章

相關標籤/搜索

CSS浮動---浮動篇

Docker命令大全

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<