1. 程式人生 > >DIV模型和浮動

DIV模型和浮動

Div模型:網頁的製作實際上就是通過div塊堆砌而成的,如下面圖:
在這裡插入圖片描述
在這裡插入圖片描述

最上層紅色板塊是漂浮著的 浮動塊,它脫離了文件流,可以按照自己想要的位置
去放置,但也帶來了一些問題,如下:

  1. 塊狀元素,會鑽進浮動元素的下面,被浮動元素所覆蓋,像這樣:
    2.
  2. 行內元素,例如文字, 則會環繞在浮動元素的周圍,為浮動元素留出空間,像這樣:
    在這裡插入圖片描述

如果不需要這些效果,就需要用到清除浮動clear 來解決,使後面的元素表現的跟浮動前一樣,按照文件流的順序來排版。

*{padding:0px; margin:0px;}
是針對整個頁面的。如果想設定頁面內部的部分是需要單獨設定的。