成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端面試題-clearfix（清除浮動(dòng)）

pcChao / 2899人閱讀

摘要：一浮動(dòng)的概念浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

一、浮動(dòng)的概念 
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?br>由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
二、浮動(dòng)的影響 1. 浮動(dòng)會(huì)導(dǎo)致父元素高度坍塌

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

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

三、浮動(dòng)的清除 1. clear屬性的空標(biāo)簽

在浮動(dòng)元素后添加一個(gè)空標(biāo)簽

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

原理：添加一個(gè)空標(biāo)簽，利用CSS提高的clear:both清除浮動(dòng)，讓父元素可以自動(dòng)獲取到高度

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

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

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

2. :after偽元素

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

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

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

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

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

閱讀更多

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

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

相關(guān)文章

  • 前端面試題-clearfix（清除浮動(dòng)）

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

    luckyw 評論0 收藏0

  • 前端面試題-BFC(塊格式化上下文)

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

    Ryan_Li 評論0 收藏0

  • 前端面試題-BFC(塊格式化上下文)

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

    layman 評論0 收藏0

  • 前端面試基礎(chǔ)(1年以內(nèi)需掌握)

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

    xiaochao 評論0 收藏0

  • 面試題CSS盒子模型，左右固定寬度，中間自適應(yīng)的五種死法

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

    leanxi 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<