浮動元素有什么特征第步？對父容器、其他浮動元素、普通元素茸俭、文字分別有什么影響?
浮動元素的特征：
- 不占據(jù)普通文檔流的空間。
- 浮動元素的左（右）外邊界不能超過其包含塊的左（右）內(nèi)邊界安皱。
- 浮動元素的左（右）外邊界必須是源文檔中之前出現(xiàn)的左浮動（右浮動）的元素的右（左）邊界调鬓，除非后出現(xiàn)浮動元素的頂端在先出現(xiàn)浮動元素的底端下面。
- 左浮動元素的右外邊界不會在其右邊浮動元素的左外邊界的右邊酌伊。一個右浮動元素的左外邊界不會在其左邊任何左浮動元素的右外邊界的左邊腾窝。
- 一個浮動元素的頂端不能比其父元素的內(nèi)頂端更高。
- 浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高居砖。
- 如果文檔中一個浮動元素之前出現(xiàn)另一個元素虹脯，浮動元素的頂端不能比包含該元素所生成的框的任何行框的頂端更高。
- 如果浮動元素出現(xiàn)在另一個浮動元素的旁邊悯蝉，而因此可能導(dǎo)致超出包含塊的話归形，這個浮動元素會向下浮動到之前浮動元素下面的某一點(diǎn)。
- 浮動元素必須盡可能高地放置鼻由。
- 左浮動元素必須向左盡可能遠(yuǎn)暇榴，右浮動元素必須向右盡可能遠(yuǎn)厚棵。
- inline元素設(shè)置浮動，改變inline的display使得它像個block-level蔼紧。
- 在重疊上婆硬，浮動元素會遮蓋block-level元素的背景，不會遮蓋inline元素奸例。
內(nèi)邊界:指盒模型中的content邊界彬犯。外邊界：指盒模型中的margin邊界。
影響：
非BFC的正常文檔流父元素會"感受"不到浮動元素的存在查吊，從而產(chǎn)生"高度塌陷"谐区。
其他浮動元素會"察覺"到浮動元素的存在按照從左到右的"正常文檔流"排列。
普通元素(非inline-level)會無視浮動元素的存在,從而占據(jù)浮動元素的"原來的位置"逻卖。
文字(也既inline-level)級的元素會環(huán)繞浮動元素宋列，表現(xiàn)的像是察覺到浮動元素一樣。
清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動指元素的側(cè)邊不允許出現(xiàn)浮動元素评也，從而使得浮動元素的不占據(jù)普通文檔流空間的使得父元素的高度塌陷問題得到解決炼杖，主要通過clear屬性實現(xiàn)。
clear:指定一個元素是否可以在它之前的浮動元素旁邊盗迟，或者必須向下移動(清除浮動) 在它的下面坤邪。clear 屬性適用于浮動和非浮動元素。
當(dāng)應(yīng)用于非浮動塊時罚缕，它將非浮動塊的邊框邊界移動到所有相關(guān)浮動元素外邊界的下方艇纺。這個行為作用時會導(dǎo)致margin collapsing不起作用。
當(dāng)應(yīng)用于浮動元素時怕磨，它將元素的外邊界移動到所有相關(guān)的浮動元素外邊界的下方喂饥。這會影響后面浮動元素的布局，后面的浮動元素的位置無法高于它之前的元素肠鲫。
方法：
- 設(shè)置浮動包含塊的父元素height值员帮。
- 使得含塊的父元素變成BFC。
- 通過添加:after偽元素导饲，然后在偽元素上設(shè)置clear屬性來實現(xiàn)捞高。
有幾種定位方式，分別是如何實現(xiàn)定位的渣锦，參考點(diǎn)是什么硝岗，使用場景是什么？
inherit從父元素繼承position屬性的值一般不用
static默認(rèn)值,沒有定位袋毙，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
relative生成相對定位的元素型檀，相對于元素本身正常位置進(jìn)行定位屬性值：left, top,right ,bottom應(yīng)用于對其自身進(jìn)行細(xì)微調(diào)整
absolute生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進(jìn)行定位屬性值：left, top,right ,bottom
fixed生成絕對定位的元素听盖，相對于瀏覽器窗口進(jìn)行定位胀溺。屬性值：left, top,right ,bottom需要一直停留在窗口的元素裂七，例如
sticky兼容性較差，一般用JS實現(xiàn)新的css3屬性仓坞，它的表現(xiàn)類似position:relative和position:fixed的合體背零，目標(biāo)區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時无埃，它的表現(xiàn)就像position:fixed徙瓶，它會固定在目標(biāo)位置。
注意:如果同時定義了left和right值嫉称，且width和height有值侦镇，那么left生效，right無效澎埠，同樣虽缕，同時定義了top和bottom，top生效蒲稳。
z-index 有什么作用? 如何使用?
z-index規(guī)定了元素在Z軸（距離用戶遠(yuǎn)近）上的順序，值越大則越靠近用戶伍派，表現(xiàn)就是元素在最上面江耀。
z-index僅在設(shè)置了position非static屬性的元素生效，且z-index的值只能在兄弟元素之間比較诉植。
Z-index默認(rèn)值為auto,則不建立層疊上下文祥国。設(shè)置為0則會建立層疊上下文。
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative相對自己原本的位置偏移晾腔，不影響其它普通流中元素的位置舌稀。
margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
BFC 是什么灼擂？如何生成 BFC壁查？BFC 有什么作用？舉例說明
BFC：塊格式化上下文（block formatting context） 是Web頁面的可視CSS渲染的一部分剔应。它是塊盒子的布局發(fā)生及浮動體彼此交互的區(qū)域睡腿。首先BFC是一個名詞，是一個獨(dú)立的布局環(huán)境峻贮，我們可以理解為一個箱子（實際上是看不見摸不著的）席怪，箱子里面物品的擺放是不受外界的影響的。
形成條件：
根元素或其它包含它的元素
浮動 (元素的 float 不是 none)
絕對定位的元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 inline-blocks (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell纤控，HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
塊元素具有overflow 挂捻，且值不是 visible
display: flow-root
注意：浮動不會影響其它塊格式化上下文中元素的布局，并且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動船万。
應(yīng)用：
自適應(yīng)的兩欄布局刻撒。
清除元素內(nèi)部浮動惜辑。
嵌套元素margin邊距合并問題的解決。
什么場景下會出現(xiàn)外邊距合并疫赎？如何合并盛撑？如何不讓相鄰元素外邊距合并？
外邊距合并出現(xiàn)的三個場景捧搞。
同一個BFC抵卫，且同處于普通流中的垂直相鄰元素外邊距合并。
父子元素的外邊距合并胎撇。
空元素的外邊距合并介粘。
合并規(guī)則：
兩個margin都是正值的時候，取兩者的最大值晚树；
當(dāng) margin 都是負(fù)值的時候姻采，取的是其中絕對值較大的，然后爵憎，從0位置慨亲，負(fù)向位移；
當(dāng)有正有負(fù)的時候宝鼓，先取出負(fù) margin 中絕對值中最大的刑棵，然后，和正 margin 值中最大的 margin 相加愚铡。
所有毗鄰的margin要一起參與運(yùn)算蛉签，不能分步進(jìn)行。
不讓相鄰元素外邊距合并的方法：
被非空內(nèi)容沥寥、padding碍舍、border 或 clear 分隔開。
不在一個普通流中或一個BFC中邑雅。
margin在垂直方向上不毗鄰片橡。
總結(jié)：
這些margin都處于普通流中，并在同一個BFC中蒂阱；
這些margin沒有被非空內(nèi)容锻全、padding、border 或 clear 分隔開录煤；
這些margin在垂直方向上是毗鄰的鳄厌，包括以下幾種情況：- 一個box的top margin與第一個子box的top margin- 一個box的bottom margin與最后一個子box的bottom margin，但須在該box的height 為auto的情況下- 一個box的bottom margin與緊接著的下一個box的top margin- 一個box的top margin與其自身的bottom margin妈踊，但須滿足沒創(chuàng)建BFC了嚎、零min-height、零或者“auto”的height、沒有普通流的子元素歪泳。
例外的情況根元素的外邊距不會參與折疊
不設(shè)置任何屬性的空span和空div不影響任何布局萝勤，可以無視之。
