在寫(xiě)了flex布局這篇文章后剧辐，我就特別想寫(xiě)一下float的使用夹攒，也想寫(xiě)一下較新的display：grid蜘醋。grid以后突然想寫(xiě)了再寫(xiě)。先來(lái)一篇大話(huà)版float布局咏尝。
1压语、css布局得5種形式：
1、默認(rèn)文檔流方式：以默認(rèn)的HTML元素的結(jié)構(gòu)的順序顯示
2编检、浮動(dòng)布局方式：通過(guò)HTML元素的float屬性顯示
3胎食、定位布局方式：通過(guò)設(shè)置HTML元素的position屬性顯示
4、flex布局方式：使布局簡(jiǎn)單允懂、自適應(yīng)（響應(yīng)式）
5厕怜、grid布局方式：類(lèi)似flex布局，甚至比f(wàn)lex更簡(jiǎn)單蕾总，不過(guò)對(duì)瀏覽器的兼容性更差
2粥航、什么是float？
浮動(dòng)是將該塊元素從原來(lái)的文檔流模式中分離出來(lái)生百，它后面的對(duì)象递雀，就視它不存在，從而占領(lǐng)它的位置蚀浆。
常用的布局效果缀程，例如，在一行中蜡坊，顯示幾個(gè)塊元素杠输，就全部元素都用float（用flex或者grid就來(lái)得非常簡(jiǎn)單）。
注意：
? ? ? ? 1秕衙、浮動(dòng)到的位置是它的父元素的位置蠢甲，如：在li標(biāo)簽中使用float，則浮動(dòng)到的位置是ul的位置据忘；
? ? ? ? 2鹦牛、在IE6下，當(dāng)父元素中的子元素的高度超過(guò)了父元素的高度勇吊，則子元素會(huì)把父元素的高度撐大到子元素的高度曼追。
float屬性的屬性值：
? ? ? ?1、none ?//不浮動(dòng)
? ? ? ?2汉规、left ?//元素向左浮動(dòng)礼殊，而后面的內(nèi)容流向?qū)ο蟮挠覀?cè)
? ? ? ?3驹吮、right ?//對(duì)象向右浮動(dòng)，而后面的內(nèi)容流向?qū)ο蟮淖髠?cè)
3晶伦、清除浮動(dòng)clear
當(dāng)元素有浮動(dòng)屬性時(shí)碟狞，會(huì)對(duì)其父元素或后面的元素產(chǎn)生影響，會(huì)出現(xiàn)布局錯(cuò)亂現(xiàn)象婚陪，可以通過(guò)清除浮動(dòng)的方式來(lái)解決浮動(dòng)元素的影響族沃。
對(duì)父元素的影響：
? ? ?1、當(dāng)子元素浮動(dòng)時(shí)泌参，父元素不再具有獨(dú)占一行的能力脆淹，后面的元素會(huì)跑上來(lái)和它重疊，所以它下面的元素必須要加清除浮動(dòng)clear:both;
? ? ?2沽一、當(dāng)子元素都是float時(shí)盖溺，父元素的高度就不能自動(dòng)適應(yīng)子元素的高度而自動(dòng)增減高度來(lái)適應(yīng)，從而導(dǎo)致父元素的內(nèi)容消失锯玛。
解決方案：
? ? 1咐柜、直接在最下面加入一個(gè)空的子元素塊（<div style='clear:both'></div>）
? ? 2兼蜈、在父元素中設(shè)置overflow:hidden;
? ? ? ? ? css中溢出的使用overflow：設(shè)置當(dāng)對(duì)象的內(nèi)容超過(guò)其指定的高度及寬度時(shí)攘残，進(jìn)行管理值：
? ? ? ? ? overflow:visible; ?//默認(rèn)值，不剪切內(nèi)容为狸，也不添加滾動(dòng)條
? ? ? ? ? overflow:auto; //在必須時(shí)歼郭，對(duì)象內(nèi)容才會(huì)被剪切或者顯示滾動(dòng)條
? ? ? ? ? overflow:hidden; ?//不顯示超過(guò)對(duì)象尺寸的內(nèi)容
? ? ? ? ? overflow:scroll; ?//總是顯示滾動(dòng)條
? ? 3、用偽類(lèi)after辐棒，在問(wèn)題6中解析（最下面）
實(shí)質(zhì)作用原理：
? 1病曾、當(dāng)(元素A)clear:left時(shí)，會(huì)把前面的(B元素)屬性float:left漾根，視為存在（即B元素的獨(dú)立行起作用）泰涂，元素A只能在元素B的下一行，不能浮到B的位置(重合)
? 2辐怕、當(dāng)(元素A)clear:right時(shí)逼蒙，會(huì)把前面B元素屬性float:right，視為存在（即B元素的獨(dú)立行起作用）寄疏，元素A只能在元素B的下一行
? 3是牢、只有clear:left對(duì)應(yīng)float:left; clear:right對(duì)應(yīng)float:right一一對(duì)應(yīng)時(shí)，才起作用陕截，否則都不起清除作用
? 4驳棱、當(dāng)clear:both時(shí)，就是不管float:(left||right)农曲，清除都起作用
clear屬性的4個(gè)屬性值：none社搅、left、right、both
對(duì)float浮動(dòng)的領(lǐng)悟：
? ? ? ? ?float有三個(gè)值：none形葬、left却汉、right（不浮動(dòng)、向左浮動(dòng)荷并、向右浮動(dòng)）合砂；使用浮動(dòng)時(shí)，整個(gè)元素塊就會(huì)脫離文檔流源织，也會(huì)脫離出該元素的父元素包含的范圍翩伪，成為獨(dú)立元素塊，但該元素塊不會(huì)影響它前面的元素塊谈息，但會(huì)影響它的父元素和父元素后面的兄弟元素缘屹、該元素下面的兄弟元素。
? ? ? ? 解決問(wèn)題的本質(zhì)是：把float的元素塊控制在父元素的內(nèi)部侠仇，使浮動(dòng)效果只在父元素內(nèi)轻姿。有兩種方法：
? ? ? ?1、父元素使用overflow：hidden逻炊、auto互亮、scroll。 原理是：對(duì)父元素的子元素進(jìn)行計(jì)算余素，判斷是否有超出父元素的大小豹休，這樣就會(huì)促使對(duì)float元素計(jì)算在內(nèi)，使float元素塊被控制在父元素內(nèi)桨吊，不會(huì)脫離父元素的范圍威根，依然是父元素的一部分。這樣就只是在父元素內(nèi)float视乐，父元素外依然是正常流分布洛搀。
? ? ? ?2、在float元素的下一個(gè)兄弟元素內(nèi)使用clear:both;是該兄弟元素認(rèn)為float元素依然存在正常文檔流中佑淀，這樣也起到和上面1相同的作用留美。
? ? ? 目的：讓float元素塊控制在父元素的范圍內(nèi)，成為父元素的一部分渣聚，只在父元素內(nèi)部起到浮動(dòng)作用独榴。不會(huì)脫離父元素的包圍范圍內(nèi)。
4奕枝、解決原來(lái)在同一行上的塊元素棺榔，因?yàn)闉g覽器窗口的大小改變，而改變位置（flex和grid就不會(huì)）
原來(lái)的樣子：
窗口改變后的樣子：
解決方案：只需要加一個(gè)大的塊元素把兩個(gè)塊元素包含在一起
5隘道、解決塊元素的水平居中的方法（div水平居中）
直接加： margin:0 auto;（外邊距margin：左右自動(dòng)auto）症歇，但必須給該元素加必要的寬度width郎笆；
注意：當(dāng)出現(xiàn)浮動(dòng)float時(shí)，通過(guò)margin:0 auto;就不起作用了
如：{
? ? ? ?margin:0 auto; //水平居中就不起作用了
? ? ? ?float:left;
}
6忘晤、塊元素的定位：position
設(shè)置對(duì)象的定位方式
屬性值：
1宛蚓、static ：靜態(tài)定位，頁(yè)面中的每一個(gè)對(duì)象的默認(rèn)值设塔。
2凄吏、absolute：絕對(duì)定位，將對(duì)象從文檔流中分離出來(lái)闰蛔，通過(guò)設(shè)置left痕钢、right、top序六、bottom四個(gè)方向相對(duì)于父級(jí)對(duì)象進(jìn)行絕對(duì)定位任连。如果不存在這樣的父對(duì)象，則依據(jù)body對(duì)象例诀。如：{ position:absolute; ?top:100px; ? left:100px;}
注意：
? ? 父元素加定位屬性随抠，一般使用position:relative; 否則子元素不認(rèn)父元素，認(rèn)上層帶有position:relative的元素為父元素繁涂，除非子元素只用position:absolute;不用到left拱她、right、top爆土、bottom屬性
3椭懊、relative：相對(duì)定位，原來(lái)對(duì)象不從文檔流中分離步势，通過(guò)設(shè)置left、right背犯、top坏瘩、bottom四個(gè)方向相對(duì)自身位置進(jìn)行定位，但定位到新位置后就是從原來(lái)文檔流分離出來(lái)（新位置分離漠魏，原位置還占領(lǐng)著）
7倔矾、利用偽類(lèi)對(duì)象after方法：必須要有content:""屬性，用在父元素中
? ? ? 定義一個(gè)類(lèi)柱锹，使用偽對(duì)象after哪自，控制浮動(dòng)元素的影響，清除浮動(dòng)代碼如下：
.clearFix:after{
? ? ? ? ?clear:both;
? ? ? ? ?display:block;
? ? ? ? ?visibility:hidden;
? ? ? ? ?height:0;
? ? ? ? ?line-height:0;
? ? ? ? ?content:"";
}
