## CSS的可視化格式模型 **這一部分內容很多參考《精通CSS-高級Web標準解決方案》以及參考來源** 前面提到了整體的渲染概念，但實際上文檔樹中的元素是按什么渲染規則渲染的，是可以進一步展開的，此部分內容即： **CSS的可視化格式模型** 先了解： - CSS中規定每一個元素都有自己的盒子模型（相當于規定了這個元素如何顯示） - 然后可視化格式模型則是把這些盒子按照規則擺放到頁面上，也就是如何布局 - 換句話說，盒子模型規定了怎么在頁面里擺放盒子，盒子的相互作用等等 說到底： **CSS的可視化格式模型就是規定了瀏覽器在頁面中如何處理文檔樹** 關鍵字： ``` 包含塊（Containing Block） 控制框（Controlling Box） BFC（Block Formatting Context） IFC（Inline Formatting Context） 定位體系 浮動 ... ``` 另外，CSS有三種定位機制：`普通流`，`浮動`，`絕對定位` 。