盒子模型

（盒子+外邊距）

層模型

1.position: absolute 絕對定位 脫離原來位置進行定位，相對於最近的父集定位，如果都沒有就用瀏覽器的邊框。

2.position: relative 相對定位 保留原來的位置進行定位，相對於原來的位置

Z-index : 10; 與絕對定位配合使用，層級越大越靠近我們

浮動模型

（產生浮動流）,寫浮動就要清除浮動流，清除對後續的影響。

觸發bfc ： （block format content 塊級格式化上下文） ----- 解決bug1

bug1: <margin塌陷問題>

bug2: <margin合並>

塊級元素看不見浮動元素，但是觸發bfc元素以及具有文本屬性的元素，以及文本屬性都能看見的浮動元素，並會排列到它的後面。

feature : 站隊（行塊級元素）

文字環繞圖片的效果

只有塊級元素可以清除浮動 display: block;

利用偽元素可以清除浮動，讓父集包括子集

***************html結構**************
<
 
div class="wrapper">
     <div></div>
</div>
***************css樣式***************
.wrapper ::after {
      content : " ";
      clear : both;
      display : block;
}
.wrapper {
    *zoom : 1; /*寫兼容*/
}

三個模型