自我總結(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)過程中碰到同一個(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：

放不下會(huì)換行

一個(gè)浮動(dòng)盒會(huì)向左或向右移動(dòng)，直到其外邊（outerEdge）挨到包含塊邊沿或者另一個(gè)浮動(dòng)盒的外邊。如果沒有足夠的水平空間來浮動(dòng)，它會(huì)向下移動(dòng)，直到空間合適或者不會(huì)再出現(xiàn)其它浮動(dòng)了

image

（2）例子2：

被卡住

高度不一樣，即出現(xiàn)一個(gè)卡住的問題

image

（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)地被擠下去換行。

image

2、從理論到實(shí)現(xiàn)效果

（1）浮動(dòng)元素脫離普通流？

A、普通流是什么？
頁(yè)面渲染時(shí)，遵循“塊級(jí)元素占據(jù)一行，行內(nèi)元素一行水平排列占據(jù)它自身寬度，再來塊級(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)元素。

例子：脫離普通流？！

塊盒看不見浮動(dòng)的 box1，但我是文本我能看見

（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間隔來表示自適應(yīng)的作用，是因?yàn)槠胀ǖ膲K級(jí)元素會(huì)充滿整個(gè)頁(yè)面）

左側(cè)固定寬度，右側(cè)自適應(yīng) （反之，也可以）

（2）三欄布局

指兩側(cè)寬度固定，中間內(nèi)容區(qū)塊自適應(yīng)

簡(jiǎn)單的三欄布局

注：
注意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;

• 左浮導(dǎo)航
• 右浮導(dǎo)航

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è)面無法撐開，浮動(dòng)甚至?xí)尭?dòng)的效果疊放在頁(yè)面某些元素效果上。所以必要時(shí)，需要清除浮動(dòng)，這也是浮動(dòng)實(shí)現(xiàn)布局的重要一環(huán)。

從浮動(dòng)具有副作用說起：

問題A：對(duì)后續(xù)元素位置產(chǎn)生影響

問題B：父容器告訴計(jì)算出現(xiàn)問題

（2）clear:left?

例子：
clear:left?

• clear:left;：要求該盒的top

border邊位于源文檔中在此之前的元素形成的所有左浮動(dòng)盒的bottom外邊下方

• clear: right;:要求該盒的top

border邊位于源文檔中在此之前的元素形成的所有右浮動(dòng)盒的bottom外邊下方

即：box2設(shè)置clear:right有效嗎?有

image

image

（3）清除浮動(dòng)的兩大副作用

對(duì)應(yīng)問題B：

父容器告訴計(jì)算出現(xiàn)問題

image

【重點(diǎn)】

由于浮動(dòng)在父容器中不能被發(fā)現(xiàn)，但要解決父容器（或頁(yè)面）撐開的問題，我們必須在浮動(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：

父容器與浮動(dòng)共存問題的解決

方法2：

#1采用偽元素（一個(gè)替代標(biāo)簽）解決行內(nèi)浮動(dòng)問題

#2采用偽元素（一個(gè)替代標(biāo)簽）解決塊級(jí)浮動(dòng)問題

（4）總結(jié)

實(shí)現(xiàn)一個(gè)水平布局

方法1：設(shè)置display：inline-block;，注意縫隙和上對(duì)其的問題

方法2：加入浮動(dòng)，用clearfix的固定代碼包裹解決父元素?fù)伍_頁(yè)面的問題

二、定位

1、什么是定位？

（1）先了解正常/文檔流（Normal Flow）是什么

Normal Flow即瀏覽器默認(rèn)的文檔布局方式。一旦添加了浮動(dòng)和定位，脫離文檔流之后，頁(yè)面布局的規(guī)則發(fā)生變化。

（2）定位
通過設(shè)置position屬性來覆蓋默認(rèn)的布局樣式。即元素添加position和對(duì)應(yīng)的屬性值，它則會(huì)脫離了文檔流。
position，讓一個(gè)元素的位置在以前的基礎(chǔ)上產(chǎn)生變動(dòng)。（考慮：相對(duì)于誰和屬性值）

2、定位的類型

（1）靜態(tài)定位

position: static; :默認(rèn)值 默認(rèn)的布局方式。

（2）相對(duì)定位：相對(duì)于自身的位置

position: relative; :相對(duì)默認(rèn)的布局位置進(jìn)行定位。

相對(duì)定位偏移前

相對(duì)定位偏移后1

相對(duì)定位偏移后2

注：
left和top只對(duì)position:absolution/relative/fixed;生效

所謂的相對(duì)定位，是針對(duì)移動(dòng)的元素自身，相對(duì)于它本身原先位置做了對(duì)應(yīng)位置的偏移。但它所占用的文檔流位置大小是沒有變的。

（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;

image

然后先從它的父元素中進(jìn)行相對(duì)定位：position: relative; 中確定該元素的絕對(duì)定位；

image

如果沒有此絕對(duì)定位，再?gòu)乃母冈氐母冈兀ㄈ鏱ody）里的位置找；如果沒有，則根據(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ì)定位后，寬度收縮

image

B、加入絕對(duì)定位后，行內(nèi)元素呈現(xiàn)快接的特性，可以添加寬高

image

（4）z-index
由于使用絕對(duì)定位之后，產(chǎn)生元素覆蓋的問題，z-index可以解決元素之間覆蓋順序的問題,，設(shè)置它的層疊順序。如：

image

（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>

如：

image

三、浮動(dòng)和定位——解決的一些問題

1、BFC和浮動(dòng)

2、浮動(dòng)和負(fù)邊距

兩個(gè)浮動(dòng)元素，如果因放不下導(dǎo)致其中一個(gè)下移，對(duì)下移的元素設(shè)置負(fù) margin 值大于自身的寬度可將其上移
如：

image

image

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ì): 兼容性好，沒縫隙問題
• 劣勢(shì): 需要清除浮動(dòng)，適合稍大的布局

4、用定位還是浮動(dòng)？

大布局、自適應(yīng)用浮動(dòng)；小元素、固定寬高用定位。具體要結(jié)合實(shí)際情況是關(guān)鍵。

如：

image