1、浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

浮動(dòng)元素：浮動(dòng)元素的框可以向左或者向右移動(dòng)，直到它的外邊緣碰到父元素包含框或者另一個(gè)浮動(dòng)元素的邊框?yàn)橹?；浮?dòng)元素不在文檔普通流之中，因此文檔普通流中的塊級(jí)元素感知不到浮動(dòng)元素的存在。

對(duì)父容器的影響：不與父容器發(fā)生外邊距合并。無法撐開父元素。

對(duì)其他浮動(dòng)元素的影響：父容器足夠?qū)?，與其他浮動(dòng)元素同一水平方向依次排列。父容器寬度在同一水平方向上不能同時(shí)容納全部浮動(dòng)元素時(shí)，超出父容器寬度的浮動(dòng)元素向下移動(dòng),直到有足夠的空間,如果水平排列三個(gè)以上高度不同浮動(dòng)元素，那么向下移動(dòng)的時(shí)候可能被卡住。

對(duì)普通元素的影響：浮動(dòng)元素之前的普通元素不受影響。浮動(dòng)元素之后的普通元素因感知不到浮動(dòng)元素的存在會(huì)被浮動(dòng)元素覆蓋。

對(duì)文字的影響：文字所在行框因?yàn)楦?dòng)元素的擠壓而縮短，從而圍繞浮動(dòng)元素排列。

2、清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

清除浮動(dòng)指：消除浮動(dòng)元素對(duì)其他元素因浮動(dòng)元素造成的高度塌陷的問題。

清除浮動(dòng)的方法：

• 設(shè)置操作元素屬性clear: both或者clear: left或者clear: right；
• 使父容器形成BFC。父容器成為BFC后，父容器將不會(huì)出現(xiàn)高度塌陷的問題。

3、 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？

三種定位方式：

• relative 相對(duì)定位。元素不脫離文檔流。參考點(diǎn)：自身在文檔流中的位置。使用場(chǎng)景：一般作為絕對(duì)定位的元素參考點(diǎn)，或者頁(yè)面圖片的小偏移。
• absolute 絕對(duì)定位。元素脫離文檔流。參考點(diǎn)：距離最近的非static祖先元素位置。如果元素沒有已定位的祖先元素，那么他的位置就相對(duì)于初始包含塊html來定位。使用場(chǎng)景：元素的水平垂直居中。
• fixed 固定定位。元素脫離文檔流。參考點(diǎn)：參考瀏覽器窗口的位置。使用場(chǎng)景：相對(duì)于瀏覽器窗口位置始終不變的顯示窗口，比如：固定邊欄和底欄。

4、z-index 有什么作用? 如何使用?

因?yàn)榻^對(duì)定位的元素脫離了普通流，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其它元素。這時(shí)可以通過給元素設(shè)置z-index屬性來控制疊放順序，該屬性值越高，元素位置越靠上。

5、 position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別？

• position:relative 只相對(duì)自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置。
• margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。

6、BFC 是什么，為什么要使用它？如何生成 BFC？BFC 有什么作用？舉例說明

1、BFC就是“塊級(jí)格式化上下文”的意思，創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子，不過只有Block-level box可以參與創(chuàng)建BFC， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)獨(dú)立盒子里的布局不受外部影響，當(dāng)然它也不會(huì)影響到外面的元素。

使用一定的CSS聲明可以生成BFC，瀏覽器對(duì)生成的BFC有一系列的渲染規(guī)則，利用這些渲染規(guī)則我們可以達(dá)到一定的布局效果，為了達(dá)到特定的布局效果我們讓元素生成BFC。

BFC的特性：

• 內(nèi)部的Box會(huì)在垂直方向，從頂部開始一個(gè)接一個(gè)地放置。
• Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加。
• 每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
• BFC的區(qū)域不會(huì)與float box疊加。
• BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然。
• 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

2、如何生成BFC：

• float 除了none以外的值
• overflow 除了visible 以外的值（hidden，auto，scroll ）
• display (table-cell，table-caption，inline-block, flex, inline-flex)
• position值為（absolute，fixed）

3、BFC有什么作用：

• 1、解決margin重疊問題；
• 2、用于布局；
• 3、用于清除內(nèi)部浮動(dòng)，計(jì)算BFC高度。