前端面試題-clearfix（清除浮動）

luckyw 發(fā)布于2019-08-30 14:08 / 1820人閱讀

摘要：一浮動的概念浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。

一、浮動的概念

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。

二、浮動的影響 1. 浮動會導(dǎo)致父元素高度坍塌

父元素中有子元素，并且父元素沒有設(shè)置高度，子元素在父元素中浮動，結(jié)果必然是父元素的高度為0，這也就導(dǎo)致了父元素高度塌陷問題。

浮動脫離文檔流，這個問題會對整個頁面布局帶來很大影響，如何解決高度坍塌問題，我們需要清除浮動。

三、浮動的清除 1. clear屬性的空標簽

在浮動元素后添加一個空標簽

，并且在CSS中設(shè)置.clear{clear:both;}，即可清理浮動。

原理：添加一個空標簽，利用CSS提高的clear:both清除浮動，讓父元素可以自動獲取到高度

優(yōu)點：簡單，代碼少，兼容所有瀏覽器

缺點：增加頁面的標簽，造成結(jié)構(gòu)的混亂

建議：不推薦使用，此方法已經(jīng)過時

2. :after偽元素

給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個:after偽元素實現(xiàn)元素之后添加一個看不見的塊元素（Block element）清理浮動。

原理：通過CSS偽元素在容器的內(nèi)部元素之后添加一個看不見的空格“/20”或點“.” ，并且設(shè)置clear屬性清除浮動。

優(yōu)點：瀏覽器支持較好

缺點：clearfix這個class需要添加zoom: 1（觸發(fā)haslayout），才能支持IE6和IE7瀏覽器

建議：推薦使用，設(shè)置公共類，減少CSS代碼

GPU云服務(wù)器云服務(wù)器清除浮動面試題棧面試題筆試面試題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115800.html

相關(guān)文章

前端面試題-clearfix（清除浮動）

摘要：一浮動的概念浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。一、浮動的概念浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。二、浮動的影響 1. 浮動會導(dǎo)致父元...

pcChao 2019-08-01 18:40 評論0 收藏0
前端面試題-BFC(塊格式化上下文)

摘要：一的概念規(guī)范解釋塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。我們可以使用實現(xiàn)清除浮動，這里就不多介紹了，想要了解的可以閱讀前端面試題清除浮動。一、BFC 的概念 1.規(guī)范解釋塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的...

Ryan_Li 2019-08-30 14:06 評論0 收藏0
前端面試題-BFC(塊格式化上下文)

摘要：一的概念規(guī)范解釋塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。我們可以使用實現(xiàn)清除浮動，這里就不多介紹了，想要了解的可以閱讀前端面試題清除浮動。一、BFC 的概念 1.規(guī)范解釋塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的...

layman 2019-08-01 18:41 評論0 收藏0
前端面試基礎(chǔ)(1年以內(nèi)需掌握)

摘要：客戶端數(shù)據(jù)存儲，能維持在多個會話范圍內(nèi)。向元素開頭插入由參數(shù)指定的內(nèi)容。向匹配的元素添加指定的類名。移除指定的屬性。主要解決了中大量的操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。區(qū)別數(shù)據(jù)驅(qū)動，通過數(shù)據(jù)來顯示視圖層而不是節(jié)點操作。金三銀四公司讓我面試 1年經(jīng)驗的前端，特此花時間研究了一番面試題，近日整理了一下想分享出來，讓更多小掘友看到，在我看來這些基本都是必備的知識點 cs...

xiaochao 2019-05-22 19:43 評論0 收藏0
面試題CSS盒子模型，左右固定寬度，中間自適應(yīng)的五種死法

摘要：優(yōu)點相比之前布局更具有靈活性缺點脫離文檔流，下面的元素都受影響。面試題目假設(shè)高度已知，請寫出三欄布局，左右300px，中間自適應(yīng) showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有幾種方法呢？最容易的應(yīng)該想到利用float來寫，代碼如下 css樣式代碼，以下五種都是用一個樣式代碼 ...

leanxi 2019-08-29 17:22 評論0 收藏0