浮動(dòng)元素有什么特征跟畅？對(duì)父容器咽筋、其他浮動(dòng)元素、普通元素徊件、文字分別有什么影響?
特征：
- 浮動(dòng)的元素生成新的BFC 脫離當(dāng)前文檔流奸攻。
- 浮動(dòng)的元素會(huì)向左/右偏移直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。
對(duì)父容器的影響：由于不在同一個(gè)BFC中虱痕，浮動(dòng)元素?zé)o法撐開父元素睹耐，父元素也不能包裹住浮動(dòng)元素。
對(duì)其他浮動(dòng)元素的影響：如果包含塊太窄無(wú)法容納水平排列的全部浮動(dòng)元素部翘，那么其它浮動(dòng)元素會(huì)向下移動(dòng)硝训，直到有足夠的空間，而如果浮動(dòng)元素的高度不同新思，那么向下移動(dòng)的時(shí)候可能會(huì)被卡住窖梁。
例：
對(duì)普通元素的影響： 普通元素會(huì)無(wú)視浮動(dòng)元素的存在，占據(jù)浮動(dòng)元素的位置表牢，而浮動(dòng)元素則會(huì)遮蓋在普通元素的上面窄绒。
對(duì)文字的影響：文字可以感知到浮動(dòng)元素的存在贝次，并且自動(dòng)環(huán)繞浮動(dòng)元素崔兴。可以將文字用div包裹起來(lái)，然后清除對(duì)該DIV的浮動(dòng)影響即可敲茄。
清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng)元素對(duì)其他元素造成的各種影響位谋。
清除浮動(dòng)的辦法:
- 對(duì)父元素添加clearfix類名，即可解決浮動(dòng)元素?zé)o法撐開父元素的情況堰燎。clearfix如下
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
- 在父元素的子元素最后添加一個(gè)空div掏父，并對(duì)其設(shè)置樣式：clear:both;可解決浮動(dòng)元素?zé)o法撐開父元素的情況，這種辦法和clearfix辦法原理相同秆剪，但是多余了一個(gè)div赊淑。
-
使用BFC清除浮動(dòng)。
給元素添加以下屬性會(huì)建立新的BFC仅讽。
給父容器新建BFC陶缺，則可以利用BFC包含浮動(dòng)元素的特性，清除浮動(dòng)元素不能撐開父元素的影響洁灵。
給普通元素新建BFC饱岸，則可以利用BFC不能重疊浮動(dòng)元素的特性，而清除被浮動(dòng)元素覆蓋的影響徽千。
給文字添加包裹層苫费，然后給包裹層新建BFC，則可以使文字不環(huán)繞浮動(dòng)元素双抽。
有幾種定位方式百框，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么牍汹，使用場(chǎng)景是什么琅翻？
| 值 | 描述 |
|---|---|
| absolute | 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位柑贞。 元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定方椎。 |
| fixed | 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位钧嘶。 元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定棠众。 |
| relative | 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位有决。 因此闸拿，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。 |
| static | 默認(rèn)值书幕。沒有定位新荤，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 繼承父元素的position值 |
z-index 有什么作用? 如何使用?
z-index 屬性設(shè)置元素的堆疊順序台汇。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面苛骨。
z-index屬性適用于定位元素（position 屬性值為 relative 或 absolute 或 fixed的對(duì)象）篱瞎。
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative;：只相對(duì)自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置痒芝。
margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素俐筋。
BFC 是什么？如何生成 BFC严衬？BFC 有什么作用澄者？舉例說(shuō)明
BFC的全稱是Block Format Content(塊級(jí)格式化上下文)
滿足下列css聲明之一的元素便會(huì)生成BFC
- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block、table-cell请琳、table-caption
- position的值為absolute或fixed
但其中粱挡，最常見的就是overflow:hidden、float:left/right俄精、position:absolute抱怔。也就是說(shuō)，每次看到這些屬性的時(shí)候嘀倒，就代表了該元素已經(jīng)創(chuàng)建了一個(gè)BFC了屈留。
BFC的作用：
防止父子元素的外邊距合并：給父元素建立新BFC則不會(huì)使父元素和子元素的上下外邊距合并。
清除浮動(dòng)的影響：具體見上文提到的“使用BFC清除浮動(dòng)”测蘑。
多欄布局的一種方式：與浮動(dòng)元素相鄰的已生成BFC的元素不能與浮動(dòng)元素相互覆蓋灌危。利用該特性可以作為多欄布局的一種實(shí)現(xiàn)方式。
在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并碳胳？如何合并勇蝙？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
-
當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)挨约，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并味混。
-
當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并诫惭。
-
假設(shè)有一個(gè)空元素翁锡，它有外邊距，但是沒有邊框或填充夕土。在這種情況下馆衔，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并怨绣。
如果這個(gè)外邊距遇到另一個(gè)元素的外邊距角溃，它還會(huì)發(fā)生合并：
注釋：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框篮撑、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并减细。
并且合并的兩個(gè)邊距值
都為正時(shí)：合并值取值較大的
一正一負(fù)時(shí)：合并值取兩值之差
都為負(fù)時(shí)：合并值取絕對(duì)值較大的
阻止外邊距合并的方法：
給其中一個(gè)元素建立新的BFC即可。
給父元素建立新BFC則不會(huì)使父元素和子元素的上下外邊距合并赢笨。
按照BFC的定義未蝌，只有同屬于一個(gè)BFC時(shí)驮吱，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊，這個(gè)包括相鄰元素树埠，嵌套元素
給父元素添加padding 或者border則不會(huì)使父元素和子元素的上下外邊距合并糠馆。
父子外邊距合并范例：
代碼：
<style>
body{
border:1px solid;
}
.father{
background: pink;
width:300px;
margin:50px;
}
.child{
background: red;
width:200px;
height:200px;
margin:50px;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
圖示：
給父元素添加overflow:hidden;樣式清除上下外邊距合并后：
