浮動元素有什么特征裂明？對父容器偶芍、其他浮動元素、普通元素取胎、文字分別有什么影響?
- 浮動模型也是一種可視化格式模型展哭，浮動的框可以左右移動（根據(jù)float屬性值而定）湃窍，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中匪傍，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣.
- 對父容器的影響：如果父容器的子元素都是浮動元素您市，那么父容器會失去高度，在浮動元素之外役衡。視覺上茵休，父容器沒有包含住浮動的子元素。本次任務的最后一個代碼通過在父容器內(nèi)新增一個塊級普通流元素使父容器撐起所有元素
- 其它浮動元素的影響：如果包含塊太窄無法容納水平排列的全部浮動元素手蝎，那么其它浮動元素會向下移動榕莺，直到有足夠的空間，而如果浮動元素的高度不同棵介，那么向下移動的時候可能會被卡住钉鸯。
- 普通元素的影響：普通元素會視浮動元素不見，占據(jù)浮動元素原有的位置邮辽，但會被浮動元素遮罩唠雕。
- 對文字的影響：文字會感知到浮動元素的存在，會留出空間逆巍，形成環(huán)繞效果及塘。
清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清除浮動就是解決父容器高度塌陷問題，通俗來講就是使父容器在視覺上包裹住子元素锐极，可以在父容器的最后面新增一個元素，也可以：
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;/*原理類似于給父容器內(nèi)部最底端新增一個元素*/
}
雖然我們得出了一種瀏覽器兼容的靠譜解決方案芳肌，但這并不代表我們一定得用這種方式灵再，很多時候我們的父容器本身需要position：absolute等形成了BFC的時候我們可以直接利用這些屬性了，總而言之清理浮動兩種方式：利用 clear屬性亿笤、使父容器形成BFC
- BFC會阻止垂直外邊距（margin-top翎迁、margin-bottom）折疊
按照BFC的定義，只有同屬于一個BFC時净薛，兩個元素才有可能發(fā)生垂直Margin的重疊汪榔，這個包括相鄰元素，嵌套元素肃拜，只要他們之間沒有阻擋(例如邊框痴腌，非空內(nèi)容，padding等)就會發(fā)生margin重疊燃领。
因此要解決margin重疊問題士聪，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說猛蔽，意義不大剥悟，沒有必要給它們加個外殼灵寺，但是對于嵌套元素來說就很有必要，只要把父元素設為BFC就可以区岗。這樣略板，元素的margin就不會和父元素的margin發(fā)生重疊
BFC不會重疊浮動元素
BFC可以包含浮動
可以利用“BFC可以包含浮動”這一特性來“清浮動”，這里其實說清浮動已經(jīng)不再合適慈缔，應該說包含浮動叮称。也就是說只要父容器形成BFC就可以，以下幾種方式可以形成BFC
- float為 left|right
- overflow為 hidden|auto|scroll
- display為 table-cell|table-caption|inline-block
- position為 absolute|fixed
對父容器添加一些屬性可以形成BFC達到“清浮動”效果胀糜，例如：
<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
用BFC使用float的時候會使父容器長度縮短颅拦，而且還有個重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦教藻？overflow屬性會影響滾動條和絕對定位的元素距帅；position會改變元素的定位方式，這是我們不希望的括堤，display這幾種方式依然沒有解決低版本IE問題
IE6碌秸、7內(nèi)有個hasLayout的概念，當元素的hasLayout屬性值為true的時候會達到和BFC類似的效果悄窃，元素負責本身及其子元素的尺寸設置和定位讥电。 下面這些設置可以使元素hasLayout為true
position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true
有幾種定位方式，分別是如何實現(xiàn)定位的轧抗，參考點是什么恩敌，使用場景是什么？
| 值 | 屬性 |
|---|---|
| inherit | 規(guī)定應該從父元素繼承 position 屬性的值 |
| static | 默認值横媚，沒有定位纠炮，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對定位的元素，相對于元素本身正常位置進行定位,因此灯蝴，left:20px 會向元素的 left位置添加20px |
| absolute | 生成絕對定位的元素恢口，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位穷躁。元素的位置通過 left, top, right 以及 bottom屬性進行規(guī)定 |
| sticky | CSS3新屬性耕肩，表現(xiàn)類似position:relative和position:fixed的合體，在目標區(qū)域在屏幕中可見時问潭，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時猿诸，它的表現(xiàn)就像position:fixed，它會固定在目標位置 |
fixed
固定定位睦授，參照位置是瀏覽器窗口的左上角两芳，即坐標點為(0px, 0px)
absolute
絕對定位，參展位置是離當前元素最近的定位方式為fixed,absolute,relative的祖先原則的左上角
z-index 有什么作用? 如何使用?
在 CSS 2.1中, 所有的盒模型元素都處于三維坐標系中去枷。 除了我們常用的橫坐標和縱坐標怖辆， 盒模型元素還可以沿著“z軸”層疊擺放是复， 當他們相互覆蓋時， z軸順序就變得十分重要
這意味著其實CSS允許你在現(xiàn)有的渲染引擎上層疊的擺放盒模型元素竖螃。 所有的層都可以用一個整數(shù)(z軸順序)來表明當前層在z軸的位置淑廊。 數(shù)字越大， 元素越接近觀察者特咆。Z軸順序用CSS的z-index
屬性來指定季惩。
要特別注意：
z-index僅在設置了position非static屬性的元素生效
z-index的值只能在兄弟元素之間比較
z-index默認值為auto，則不建立層疊上下文腻格。設置為0則會建立層疊上下文
position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative;只相對自己原本位置發(fā)生偏移画拾，不影響其它普通流中元素的位置。
- margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素菜职。
BFC 是什么青抛？如何生成 BFC？BFC 有什么作用酬核？舉例說明
浮動元素和絕對定位元素蜜另，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子嫡意，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）举瑰。
在BFC中，盒子從頂端開始垂直地一個接一個地排列蔬螟，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的此迅。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生折疊旧巾。
在BFC中邮屁，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）菠齿。
- 對元素設置以下屬性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed; - BFC的作用有：
（1） 解決margin重疊問題。所謂margin重疊是指處于同一個BFC的相鄰元素坐昙、嵌套元素绳匀，只要它們之間沒有阻擋（如：邊框、非空內(nèi)容炸客、padding等）就會發(fā)生margin重疊疾棵。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題。
（2） 清除浮動痹仙。因為BFC可以包含浮動是尔，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了浮動
在什么場景下會出現(xiàn)外邊距合并开仰？如何合并拟枚？如何不讓相鄰元素外邊距合并薪铜？給個父子外邊距合并的范例
若該元素垂直方向上的兄弟元素也有外邊距俯艰，那么垂直方向的外邊距依舊會發(fā)生合并
特別地，
- 當 margin 都是負值的時候锌订，取的是其中絕對值較大的竹握，然后，從0位置瀑志，負向位移涩搓；
- 當有正有負的時候，先取出負 margin 中絕對值中最大的劈猪，然后昧甘，和正 margin 值中最大的 -
margin 相加。 - 所有毗鄰的margin要一起參與運算战得，不能分步進行充边。
