前端基礎---浮動(二) 文字環繞
阿新 • • 發佈：2021-07-01
浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，
所以我們可以通過浮動來設定文字環繞圖片的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; }.box1{ width: 100px; height: 100px; background-color: #bfa; /* * 浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍， * 所以我們可以通過浮動來設定文字環繞圖片的效果 */ /*box1向左浮動*/ float: left; } .p1{ background-color: yellow; } </style> </head> <body> <div class="box1"></div> <p class="p1"> 在我的後園，可以看見牆外有兩株樹，一株是棗樹，還有一株也是棗樹。 這上面的夜的天空，奇怪而高，我生平沒有見過這樣奇怪而高的天空。他彷彿要離開人間而去，使人們仰面不再看見。然而現在卻非常之藍，閃閃地䀹著幾十個星星的眼，冷眼。他的口角上現出微笑，似乎自以為大有深意，而將繁霜灑在我的園裡的野花草上。 我不知道那些花草真叫什麼名字，人們叫他們什麼名字。我記得有一種開過極細小的粉紅花，現在還開著，但是更極細小了，她在冷的夜氣中，瑟縮地做夢，夢見春的到來，夢見秋的到來，夢見瘦的詩人將眼淚擦在她最末的花瓣上，告訴她秋雖然來，冬雖然來，而此後接著還是春，蝴蝶亂飛，蜜蜂都唱起春詞來了。她於是一笑，雖然顏色凍得紅慘慘地，仍然瑟縮著。 棗樹，他們簡直落盡了葉子。先前，還有一兩個孩子來打他們，別人打剩的棗子，現在是一個也不剩了，連葉子也落盡了。他知道小粉紅花的夢，秋後要有春；他也知道落葉的夢，春後還是秋。他簡直落盡葉子，單剩乾子，然而脫了當初滿樹是果實和葉子時候的弧形，欠伸得很舒服。但是，有幾枝還低亞著，護定他從打棗的竿梢所得的皮傷，而最直最長的幾枝，卻已默默地鐵似的直刺著奇怪而高的天空，使天空閃閃地鬼䀹眼；直刺著天空中圓滿的月亮，使月亮窘得發白。 鬼䀹眼的天空越加非常之藍，不安了，彷彿想離去人間，避開棗樹，只將月亮剩下。然而月亮也暗暗地躲到東邊去了。而一無所有的乾子，卻仍然默默地鐵似的直刺著奇怪而高的天空，一意要制他的死命，不管他各式各樣地䀹著許多蠱惑的眼睛。 哇的一聲，夜遊的惡鳥飛過了。</p> </body> </html>
脫離文件流後
不管是塊元素還是內聯元素都會是塊元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ /* * 在文件流中，子元素的寬度預設佔父元素的全部 */ background-color: #bfa; /* * 當元素設定浮動以後，會完全脫離文件流. * 塊元素脫離文件流以後，高度和寬度都被內容撐開 */ /*float: left;*/ } .s1{ /* * 開啟span的浮動 * 內聯元素脫離文件流以後會變成塊元素 */ float: left; width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box1">a</div> <span class="s1">hello</span> </body> </html>