元素浮動之后文字會環繞而不是重合原因示例解答

2024-07-11 08:27:56

字體：大中小

來源：轉載

供稿：網友

最近在學習CSS，在浮動上遇到一問題：既然浮動元素脫離了文檔流，為什么文字會環繞在浮動元素的周邊而不是跟浮動元素重合呢？

這問題困擾了我整整一天，上網各種搜、各種問人，也沒有讓我信服的答案（可能有的答案是正確的，但是我基礎差，沒有聽懂）。最后經過一整天搜索、詢問的沉淀，最后在別人的推薦下看了《CSS權威指南》，現在自認為算是基本上明白怎么回事了。以下都是我自己所想，希望可以幫到和我一樣的初學者。如果有錯誤或者不妥的地方，也請高手指出，我定當改正，謝謝！！

為了徹底明白這個問題，必須先弄明白幾個問題。

第一，浮動的目的。最初時，浮動只能用于圖像（某些瀏覽器還支持表的浮動），目的就是為了允許其他內容（如文本）“圍繞”該圖像。而后來的CSS允許浮動任何元素。

第一，絕對定位與浮動的區別。

復制代碼

代碼如下:
<body>
<div id="container">
<div id="A">你好</div>
<div id="B">
第一，絕對定位與浮動的區別。絕對定位是將元素徹底從文檔流刪除，并相對于其包含塊定位（包含塊可能是文檔中的另一個元素或者是初始包含塊），元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣，該元素再也不會影響其他元素的布局了。如果對元素A使用絕對定位的話，元素B占據元素A之前的位置，與元素A重合在一起，并被元素A覆蓋。如圖所示。
</div>
</div>
</body>

絕對定位是將元素徹底從文檔流刪除，并相對于其包含塊定位（包含塊可能是文檔中的另一個元素或者是初始包含塊），元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣，該元素再也不會影響其他元素的布局了。例如，對于上面的html片段，如果將元素A定位到左上角的話，元素B占據元素A之前的位置，與元素A重合在一起，并被元素A覆蓋。CSS代碼和效果圖如下。

復制代碼

代碼如下:
body {
color:#FFF;
}
#container {
position:relative;
width:500px;
height:250px;
background:#039;
}
#A {
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
background:#C00;
}

復制代碼

代碼如下:
而浮動，會以某種方式將浮動元素從文檔的正常流中刪除，并把浮動元素向左邊和右邊浮動，不過它還是會影響布局，關于浮動的有許多規則，讀者可自行閱讀《CSS權威指南》一書，介紹地很詳細。采用CSS的特有方式，浮動元素幾乎“自成一派”，不過它們還是對文檔的其余部分有影響。這種影響源自于這樣一個事實：一個元素浮動時，其他內容會“環繞”該元素。如果將元素A向左浮動的話，CSS代碼和效果圖如下圖所示。由此可見，浮動之后，文字跑到了元素A的右邊，即實現了文字環繞浮動元素的功能（如果A不浮動的話，div是塊級元素，不可能有兩個div處在同一行）。
但是這兒有一小問題，如果你仔細觀察CSS代碼的話和效果圖的話，會發現元素B的背景和元素A的背景重合了一部分。這就是用來解釋為什么說浮動元素脫離了正常的文檔流但是還會影響布局的原因。之所以說元素A脫離了文檔流，是因為元素B確實占據了元素A之前的位置，好像元素A已經不存在了似的。只所以說會影響布局，是因為元素B里的文字并沒有隨之占據元素A的位置，而是環繞在浮動之后的元素A旁邊。這是為了避免元素A將元素B里的文字覆蓋了，這恰好就是浮動的目的！

上一篇：css實現隨鼠標移動div漸變色效果

下一篇：css教程制作css圓角邊框(兼容全部瀏覽器)

發表評論

共有條評論