自我總結(jié)：
浮動(dòng)是實(shí)現(xiàn)布局的一種常見方式
浮動(dòng)脫離普通文檔流做院，即頁(yè)面渲染時(shí)盲泛，盒模型按標(biāo)準(zhǔn)會(huì)將父元素所設(shè)置的屬性將頁(yè)面撐開；加入浮動(dòng)后山憨，父元素不會(huì)發(fā)現(xiàn)浮動(dòng)元素查乒，父元素則不會(huì)被浮動(dòng)元素?fù)伍_頁(yè)面）弥喉。 塊級(jí)元素默認(rèn)樣式可以撐滿父容器郁竟，加入浮動(dòng)后，塊級(jí)元素浮動(dòng)則會(huì)收縮到內(nèi)容本身的寬度由境。 加入浮動(dòng)后棚亩，在父元素中看不見浮動(dòng)元素蓖议，在行內(nèi)元素看得見浮動(dòng)，如文本或其他行內(nèi)元素都會(huì)環(huán)繞浮動(dòng)元素讥蟆。
加入浮動(dòng)后勒虾，浮動(dòng)盒會(huì)向左或向右移動(dòng)，直到其外邊挨到包含塊邊沿或者另一個(gè)浮動(dòng)盒的外邊瘸彤。 當(dāng)同一個(gè)方向的浮動(dòng)元素：當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過(guò)程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)修然，它會(huì)緊跟在它們后面； 當(dāng)反方向的浮動(dòng)元素：互不影響质况，位于同一條水平線上愕宋，當(dāng)空間不夠時(shí)會(huì)被擠下。 當(dāng)浮動(dòng)盒的寬度不一樣時(shí)结榄，緊跟后面的另一浮動(dòng)盒則會(huì)出現(xiàn)卡住的現(xiàn)象中贝。
加入浮動(dòng)后，塊級(jí)元素內(nèi)容寬度會(huì)縮短臼朗，呈現(xiàn)
inline-block``的特性邻寿，放不下會(huì)換行；行內(nèi)元素則以塊級(jí)元素特性呈現(xiàn)视哑，可以設(shè)置width绣否、height、margin```黎炉。
一枝秤、浮動(dòng)：
1、從實(shí)踐嘗試到理論定義
（1）例子1：
一個(gè)浮動(dòng)盒會(huì)向左或向右移動(dòng)慷嗜，直到其外邊（outerEdge）挨到包含塊邊沿或者另一個(gè)浮動(dòng)盒的外邊淀弹。如果沒(méi)有足夠的水平空間來(lái)浮動(dòng)，它會(huì)向下移動(dòng)庆械，直到空間合適或者不會(huì)再出現(xiàn)其它浮動(dòng)了
（2）例子2：
高度不一樣薇溃，即出現(xiàn)一個(gè)卡住的問(wèn)題
（3）例子3：
注：
未設(shè)置樣式的塊級(jí)元素，即有默認(rèn)樣式缭乘，margin-top(or bottom);
因?yàn)楦?dòng)（盒）不在普通流內(nèi)沐序，在浮動(dòng)盒之前或者之后創(chuàng)建的未定位的塊盒會(huì)豎直排列，就像浮動(dòng)不存在一樣堕绩。接著策幼，浮動(dòng)（盒）創(chuàng)建的當(dāng)前及后續(xù)行盒會(huì)進(jìn)行必要的縮短，為了給浮動(dòng)（盒）的margin box讓出空間奴紧。
例子：
如一個(gè)普通元素（如p）遇到浮動(dòng)元素之后特姐，普通元素（如p）看不見這個(gè)浮動(dòng)元素，但這個(gè)普通元素里的行盒（文字生成的行盒特性）能看到該浮動(dòng)元素黍氮。當(dāng)浮動(dòng)盒寬度變化唐含，文字行盒也會(huì)相應(yīng)地被擠下去換行浅浮。
2、從理論到實(shí)現(xiàn)效果
（1）浮動(dòng)元素脫離普通流捷枯？
A滚秩、普通流是什么？
頁(yè)面渲染時(shí)淮捆，遵循“塊級(jí)元素占據(jù)一行郁油，行內(nèi)元素一行水平排列占據(jù)它自身寬度，再來(lái)塊級(jí)元素素依次向下排列”規(guī)律攀痊，并且這些元素從上到下已艰，從左到右會(huì)將父元素所展示的頁(yè)面撐開。
B蚕苇、脫離普通流：
父元素計(jì)算寬高的時(shí)候哩掺，發(fā)現(xiàn)不了浮動(dòng)元素。一旦有浮動(dòng)元素涩笤，塊級(jí)元素不會(huì)按照“從上到下嚼吞，從左到右”的順序去展示頁(yè)面，塊級(jí)元素會(huì)收縮內(nèi)容寬度（呈現(xiàn)inline-block的特性）蹬碧，那么舱禽，父容器不會(huì)被里面的浮動(dòng)元素?fù)伍_；
行內(nèi)元素則會(huì)能看見浮動(dòng)元素恩沽，如文本或其他行內(nèi)元素則會(huì)環(huán)繞浮動(dòng)元素誊稚。
例子：脫離普通流？罗心！
（2）小結(jié)：
塊級(jí)元素浮動(dòng)渤闷，寬度會(huì)收縮（width:100%的用武之地）疾瓮；
行內(nèi)元素浮動(dòng)，以塊級(jí)特性呈現(xiàn)（不用再寫display: inline-block;）
塊級(jí)元素浮動(dòng)寬度收縮飒箭，行內(nèi)元素浮動(dòng)以塊級(jí)特性呈現(xiàn)
注：
塊級(jí)元素默認(rèn)樣式可以撐滿父容器狼电，塊級(jí)元素浮動(dòng)則會(huì)收縮到內(nèi)容的本身的寬度。
如：
.box{
float: left;
background: red;
}
注：行內(nèi)元素能發(fā)現(xiàn)浮動(dòng)元素弦蹂，如設(shè)置float或者position元素屬性肩碟，便有了塊級(jí)元素的特性，可以設(shè)置寬高凸椿。
span{
float: left;
background: blue;
width: 100px;
height: 50px;
margin: 10px;
};
（3）注：
脫離普通流削祈？！VS abosolute
3削饵、浮動(dòng)的使用場(chǎng)景
（1）兩欄布局
特指一側(cè)是固定寬度岩瘦，另一側(cè)是自適應(yīng)（用margin間隔來(lái)表示自適應(yīng)的作用，是因?yàn)槠胀ǖ膲K級(jí)元素會(huì)充滿整個(gè)頁(yè)面）
左側(cè)固定寬度窿撬，右側(cè)自適應(yīng) （反之启昧，也可以）
（2）三欄布局
指兩側(cè)寬度固定，中間內(nèi)容區(qū)塊自適應(yīng)
注：
注意html結(jié)構(gòu)順序劈伴，即按照class為menu——aside——main的div元素順序?qū)懛?/p>
當(dāng)一個(gè)浮動(dòng)盒按照設(shè)置實(shí)現(xiàn)左浮動(dòng)時(shí)密末，另一個(gè)浮動(dòng)元素設(shè)置為右浮，此時(shí)這個(gè)右浮跛璧，即相對(duì)于同級(jí)元素的高度進(jìn)行右秆侠铩（除非頁(yè)面放不下被擠下移除外）。
（3）導(dǎo)航條
list-style:none;
float：left(or right);
margin-left:XXpx;
4追城、清除浮動(dòng)
（1）為什么要清除浮動(dòng)刹碾？
雖然浮動(dòng)是一種實(shí)現(xiàn)布局的方式，但是浮動(dòng)在父元素中看不見座柱。一旦在元素標(biāo)簽內(nèi)加入了浮動(dòng)迷帜，浮動(dòng)脫離了普通流，在頁(yè)面渲染時(shí)并不會(huì)按照html結(jié)構(gòu)的計(jì)算規(guī)則色洞，浮動(dòng)元素會(huì)導(dǎo)致父元素所設(shè)置的頁(yè)面無(wú)法撐開戏锹，浮動(dòng)甚至?xí)尭?dòng)的效果疊放在頁(yè)面某些元素效果上。所以必要時(shí)火诸，需要清除浮動(dòng)锦针，這也是浮動(dòng)實(shí)現(xiàn)布局的重要一環(huán)。
從浮動(dòng)具有副作用說(shuō)起：
問(wèn)題A：對(duì)后續(xù)元素位置產(chǎn)生影響
問(wèn)題B：父容器告訴計(jì)算出現(xiàn)問(wèn)題
（2）clear:left?
例子：
clear:left?
-
clear:left;：要求該盒的top
border邊位于源文檔中在此之前的元素形成的所有左浮動(dòng)盒的bottom外邊下方
-
clear: right;:要求該盒的top
border邊位于源文檔中在此之前的元素形成的所有右浮動(dòng)盒的bottom外邊下方
（3）清除浮動(dòng)的兩大副作用
對(duì)應(yīng)問(wèn)題B：
【重點(diǎn)】
由于浮動(dòng)在父容器中不能被發(fā)現(xiàn)置蜀，但要解決父容器（或頁(yè)面）撐開的問(wèn)題奈搜，我們必須在浮動(dòng)和父容器（或者浮動(dòng)元素）共存時(shí)尋找到一種解決方法。
即在帶有浮動(dòng)屬性的父元素標(biāo)簽中添加class為clearfix盯荤，關(guān)于偽元素屬性::after （或::before）的固定代碼樣式媚污，
偽元素清除浮動(dòng)法（IE8以上使用）：
.clearfix::after {
content:'';
display: block;
clear: both;
}
/*或觸發(fā)ie6的屬性*/
.clearfix {
*zoom:1;
}
設(shè)置一個(gè)普通元素內(nèi)不具有浮動(dòng)的屬性參數(shù)，即float：none;和clear: left; 即可將完成clear:left;的效果【注意：應(yīng)注重css元素的權(quán)重廷雅，以免報(bào)錯(cuò)】
或
【解決】
方法1：
方法2：
#1采用偽元素（一個(gè)替代標(biāo)簽）解決行內(nèi)浮動(dòng)問(wèn)題
#2采用偽元素（一個(gè)替代標(biāo)簽）解決塊級(jí)浮動(dòng)問(wèn)題
（4）總結(jié)
實(shí)現(xiàn)一個(gè)水平布局
方法1：設(shè)置display：inline-block;耗美，注意縫隙和上對(duì)其的問(wèn)題
方法2：加入浮動(dòng)，用clearfix的固定代碼包裹解決父元素?fù)伍_頁(yè)面的問(wèn)題
二航缀、定位
1商架、什么是定位？
（1）先了解正常/文檔流（Normal Flow）是什么
Normal Flow即瀏覽器默認(rèn)的文檔布局方式芥玉。一旦添加了浮動(dòng)和定位蛇摸，脫離文檔流之后，頁(yè)面布局的規(guī)則發(fā)生變化灿巧。
（2）定位
通過(guò)設(shè)置position屬性來(lái)覆蓋默認(rèn)的布局樣式赶袄。即元素添加position和對(duì)應(yīng)的屬性值揽涮，它則會(huì)脫離了文檔流。
position饿肺，讓一個(gè)元素的位置在以前的基礎(chǔ)上產(chǎn)生變動(dòng)蒋困。（考慮：相對(duì)于誰(shuí)和屬性值）
2、定位的類型
（1）靜態(tài)定位
position: static; :默認(rèn)值 默認(rèn)的布局方式敬辣。
（2）相對(duì)定位：相對(duì)于自身的位置
position: relative; :相對(duì)默認(rèn)的布局位置進(jìn)行定位雪标。
注：
left和top只對(duì)position:absolution/relative/fixed;生效
所謂的相對(duì)定位，是針對(duì)移動(dòng)的元素自身溉跃，相對(duì)于它本身原先位置做了對(duì)應(yīng)位置的偏移村刨。但它所占用的文檔流位置大小是沒(méi)有變的。
（3）絕對(duì)定位：相對(duì)于父元素位置
position: absolute; 絕對(duì)定位元素脫離正常文檔流撰茎，相對(duì)其定位上下文（Positioning Context）進(jìn)行定位嵌牺。 即頁(yè)面上的正常元素看不見該絕對(duì)定位元素。但頁(yè)面上絕對(duì)定位常覆蓋其他元素龄糊。多個(gè)絕對(duì)定位元素存在頁(yè)面髓梅，它們之間的絕對(duì)定位也相互看不見，產(chǎn)生重疊現(xiàn)象绎签。
尋找頁(yè)面中一個(gè)元素絕對(duì)位置枯饿，可以先設(shè)置該元素絕對(duì)定位：position: absolute;
然后先從它的父元素中進(jìn)行相對(duì)定位：position: relative; 中確定該元素的絕對(duì)定位；
如果沒(méi)有此絕對(duì)定位诡必，再?gòu)乃母冈氐母冈兀ㄈ鏱ody）里的位置找奢方；如果沒(méi)有，則根據(jù)html的根節(jié)點(diǎn)作為參考爸舒。
總結(jié)：
使用絕對(duì)定位時(shí)蟋字，設(shè)置好參考點(diǎn)，一般扭勉，絕對(duì)定位的參考點(diǎn)為元素父容器
如一個(gè)元素設(shè)置了position：absolute鹊奖；，那么它的父容器則設(shè)置position：relative涂炎；
注：
元素中使用了position：absolute;忠聚，就像浮動(dòng)一樣有了一些特性：
A、加入絕對(duì)定位后唱捣，寬度收縮
B两蟀、加入絕對(duì)定位后，行內(nèi)元素呈現(xiàn)快接的特性震缭，可以添加寬高
（4）z-index
由于使用絕對(duì)定位之后赂毯，產(chǎn)生元素覆蓋的問(wèn)題，z-index可以解決元素之間覆蓋順序的問(wèn)題,，設(shè)置它的層疊順序党涕。如：
（5）固定定位
position: fixed; 相對(duì)瀏覽器窗口進(jìn)行定位烦感。
如“回到頂部”、“內(nèi)容變固定窗口不變”等效果膛堤。因此當(dāng)滾動(dòng)產(chǎn)生時(shí)手趣，固定定位元素依然處于窗口的某個(gè)固定位置。
.feedback {
right: 30px;
bottom: 30px;
position: fixed;
}
（6）粘性定位（兼容性差）
position: sticky;是相對(duì)定位和固定定位的結(jié)合骑祟。
默認(rèn)情況下表現(xiàn)為相對(duì)定位，當(dāng)瀏覽器窗口頂端與元素的距離等于 top 屬性的值時(shí)气笙，轉(zhuǎn)變?yōu)楣潭ǘㄎ弧?/p>
如：
三次企、浮動(dòng)和定位——解決的一些問(wèn)題
1、BFC和浮動(dòng)
2潜圃、浮動(dòng)和負(fù)邊距
兩個(gè)浮動(dòng)元素缸棵，如果因放不下導(dǎo)致其中一個(gè)下移，對(duì)下移的元素設(shè)置負(fù) margin 值大于自身的寬度可將其上移
如：
3谭期、用inline-block;還是浮動(dòng)
（1）inline-block;
- 優(yōu)勢(shì): 不需要清除浮動(dòng)堵第，簡(jiǎn)單，在設(shè)置居中時(shí)更方便,適合子內(nèi)容不多的元素水平排列
- 劣勢(shì): 需要注意縫隙隧出，注意對(duì)齊踏志，ie8以下不能用
（2）float - 優(yōu)勢(shì): 兼容性好，沒(méi)縫隙問(wèn)題
- 劣勢(shì): 需要清除浮動(dòng)胀瞪，適合稍大的布局
4针余、用定位還是浮動(dòng)？
大布局凄诞、自適應(yīng)用浮動(dòng)圆雁；小元素、固定寬高用定位帆谍。具體要結(jié)合實(shí)際情況是關(guān)鍵伪朽。
如：
