傳統網頁布局三種方式：
浮動：
浮動布局注意：父元素排列上下，內部子元素採取浮動排列左右；浮動的盒子只會影響浮動盒子後面的標準流。浮動解決辦法：由於父盒子很多情況下不方便給高度，但是子盒子浮動又不占有位置，最後父盒子高度為0，就會影響下面的標準流盒子。
清除浮動的本質就是清除浮動元素造成的影響，清除之後，父盒子會根據子盒子自動監測高度。
why？1.父盒子無高度2.子盒子浮動3.影響下面布局
1.額外標籤法：新增乙個盒子新增clear，要求標籤為塊級元素2.父級新增overflow：overflow：hidden；可清除浮動，但無法顯示溢位部分
3.：after（給父級新增），網上覆制貼上
4.雙偽元素清除浮動：複製貼上
讓盒子在某個盒子內移動或固定位置，並且可以壓住盒子；定位模式：定位=定位模式+邊偏移；
通過position：static | relative | absolute | 邊偏移：top bottom left right
static：預設，無定位一些法則：relative：1.相對於原來位置2.原有位置繼續保留
absolute：相對於祖先元素1.無父元素或父元素無定位，以瀏覽器為準2.如祖先有定位，以最近一級有的為參考3.絕對定位不佔位置
粘性定位：sticky（1.以瀏覽器可視窗為參考2.占有原先位置3.必須新增乙個）
子級絕對定位，父級相對定位絕對定位盒子居中顯示：子級絕對定位，不占有位置，可以放到盒子任何地方
父盒子需要加定位限制子盒子在父盒子內顯示
父盒子布局需要占有位置，需加相對定位
fixed固定在瀏覽器可視區的位置
加了絕對定位不能通過新增margin：0 auto水平居中定位拓展：水平：先left50%（父容器寬度一半）再margin負值盒子半值
垂直：先top50%（父容器寬度一半）再margin負值盒子半值
行內元素新增絕對/固定定位，可直接設定寬高；元素顯示與影藏：塊級元素新增絕對/固定定位，盒子大小為內容大小（寬也不再是瀏覽器寬度）
浮動元素不會壓住標準流的文字，但是絕對定位會壓住；
讓乙個元素在頁面影藏或顯示出來display：block（顯示）| none（影藏，且不占有原有位置）
>
CSS浮動與定位
浮動 如果希望塊元素在頁面中水平排列，使用float浮動元素，脫離文件流 可選值 none 預設，元素在文件流中排列 left 元素脫離文件流，向頁面左側浮動 right 元素脫離文件流，向頁面右側浮動 元素浮動後，下邊的元素會立即向上移動 a浮動後，b會直接頂到上面 元素浮動後不會超出父元素邊框和...
CSS浮動與定位
css浮動 clear 向哪邊浮動，清除哪邊 clear left 在左側不允許浮動元素。clear right 在右側不允許浮動元素。clear both 在左右兩側均不允許浮動元素 clear none 預設值。允許浮動元素出現在兩側。clear inherit 規定應該從父元素繼承 clear...
CSS浮動與定位
1.1浮動 浮動 是指設定了浮動屬性的元素會脫離標準標準流的控制，移動到其父元素中指定位置的過程。它可以讓任何盒子可以在一行排列，目的用來布局。在css中，通過float屬性來定義浮動，其基本語法格式如下 float none left right選擇器 屬性值描述 left 元素向左浮動 righ...