div盒子與浮動（float）

在html中所有的標籤(元素)都可以看作是乙個盒子

盒子的四要素：內容、內邊距（padding）、盒子厚度（border）、外邊距（margin）

注：1. 在使用盒子時，margin要素有一定的弊端（也就是margin塌陷）。例：

margin塌陷：就是在設定子元素margin-top時父元素跟著下來

解決方法：

1. 為父盒子設定邊框，例：border：1px solid black;

2. 為父盒子設定內邊距，例：padding-top: 50px;

3. 為父盒子設定overflow: hidden;子盒子設定margin-top:50px;

注

這裡的outer裡的大小並沒有400*400px，因為內容只有200*200px ，所以outer的大小也只有200*200，上面**中不加背景和邊框，是因為他們自帶樣式會加大原來盒子大小

盒子的特性：獨佔一行，屬性與id（#）選擇器和，class（.）選擇器使用

顯示如下圖形，如下**：

注意：這裡設定畫素大小px最好不要掉，爭對不同瀏覽器

生活中的浮動：想像一下盒子的浮動，沒有浮動的盒子是沉浸在水下的，浮動的盒子是漂在水上的，頁面上的是從上往下漂，也就是頁面頂部就終點，不管是漂在水上的，還是沉浸在水下的，他們都會到達終點（最先到達的會占用他的地方，依次），只是先後的問題

為什麼用浮動：兄弟關係的盒子，也就是多個塊狀元素實現並列一行顯示

所有浮動元素受父盒子影響，設定了左浮動的元素，先找父親的左邊緣，若遇到浮動的元素，就靠著浮動元素排列，設定浮動的元素不獨佔一行

例子：

為什麼要清除周邊元素的浮動：用於撐起父元素的高度方法一：clear:both;給設定了浮動元素的最下面新增乙個清除浮動的元素，該元素屬於正常文件流中的內容，它會緊靠著設定浮動元素的最底邊緣，也稱為額外標籤法。

例：

注： clear:both;清除浮動不推薦使用，且只能放在有浮動元素的父盒裡

方法二：偽元素法

偽元素：偽元素用於向文字設定特殊樣式，也就是格式化，不兩隻偽元素其作用不同，具體學習可以在上可以了解。（推薦使用）

語法：選擇器：偽元素

注：在版本較低的瀏覽器下，偽元素不存在