1. 程式人生 > >清晰解析什麼是文件流?

清晰解析什麼是文件流?

  所謂的文件流,就好比如一塊塊的正方形組成的一個整體,而這些正方形就代表著每個div。當某個div脫離了這個整體,也就代表他脫離了文件流。然後下一個div就會來填補脫離的div的位置。下面是流程圖。
  有四個小朋友在買小賣部排隊買糖吃~
這裡寫圖片描述
  第一個買完了糖的小朋友脫離了排隊的隊伍開心的吃糖去。
這裡寫圖片描述
後面的小朋友看前面的小朋友走了,連忙補上防止別人插隊。
這裡寫圖片描述
這裡寫圖片描述
  實際上,在html頁面中,我們看到的會是這樣。
  這裡寫圖片描述
  div2被div1給覆蓋了!因為脫離文件流的div1不佔據頁面的空間了,所以才會留有空間給後面的div補上,當然這也導致了div2給div1覆蓋了!

  目前常見的會影響元素脫離文件流的css屬性有:
①float浮動。
②position的absolute和fixed定位。

  最後,想知道要怎麼解決這種覆蓋問題的童鞋可以戳這裡哦~