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

luckyw 發布于2019-08-30 14:08 / 1815人閱讀

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

一、浮動的概念

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

二、浮動的影響 1. 浮動會導致父元素高度坍塌

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

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

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

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

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

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

優點：簡單，代碼少，兼容所有瀏覽器

缺點：增加頁面的標簽，造成結構的混亂

建議：不推薦使用，此方法已經過時

2. :after偽元素

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

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

優點：瀏覽器支持較好

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

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

GPU云服務器云服務器清除浮動面試題棧面試題筆試面試題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115800.html

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

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

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

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

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

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

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

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

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

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

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