導(dǎo)航條css clear清除浮動(dòng) 解決高度塌陷最終版

劉厚水發(fā)布于2019-08-02 16:12 / 405人閱讀

摘要：講清除浮動(dòng)屬性值清除左右元素浮動(dòng)對本元素造成的影響。代碼導(dǎo)航條解決高度塌陷問題最終版利用一個(gè)占位，清除浮動(dòng)對它的影響從而實(shí)現(xiàn)解決高度塌陷的問題，但是此方法會(huì)在頁面結(jié)構(gòu)中加入一個(gè)占位標(biāo)簽，影響源碼閱讀。

63講導(dǎo)航條css樣式



導(dǎo)航條







    首頁
    新聞
    聯(lián)系
    關(guān)于

總結(jié)

主要是理解高度塌陷問題的原因，BFC解決方案。行內(nèi)元素設(shè)置寬高要先轉(zhuǎn)為塊級(jí)元素。

64講 clear清除浮動(dòng)

屬性值:none,left,right,both 清除左右元素浮動(dòng)對本元素造成的影響。本講非常非常重要，建議看視頻重新溫習(xí)。

重點(diǎn)

在這里不要管對其他元素只管對自己本身的影響！！比如：div1左浮動(dòng)，div2右浮動(dòng)，div3清除浮動(dòng)。我們只考慮div3清除浮動(dòng)的效果，對于div2而言該怎么樣怎么樣。

both屬性

這不是清除兩側(cè)的浮動(dòng)，而是清除對自身元素影響最大的那個(gè)元素的浮動(dòng)影響。

代碼



導(dǎo)航條

解決高度塌陷問題最終版

利用一個(gè)div占位，清除浮動(dòng)對它的影響從而實(shí)現(xiàn)解決高度塌陷的問題，但是此方法會(huì)在頁面結(jié)構(gòu)中加入一個(gè)占位標(biāo)簽，影響源碼閱讀。



導(dǎo)航條





 
 
請你把我刪除！【清除div2對我的影響，從而撐開div1達(dá)到解決高度塌陷的問題】 請你把我刪除！

那么如何實(shí)現(xiàn)既不添加div又能清除浮動(dòng)解決高度塌陷呢？



導(dǎo)航條

上面的div1:after轉(zhuǎn)換為塊級(jí)元素原因

經(jīng)測試，內(nèi)聯(lián)元素不能清除浮動(dòng)帶來的影響。文本該怎么環(huán)繞還是怎么環(huán)繞！



導(dǎo)航條






行內(nèi)元素清除浮動(dòng)沒效果，所以上面的div:after必須轉(zhuǎn)換為塊元素

云服務(wù)器 GPU云服務(wù)器 css導(dǎo)航條浮動(dòng)clear 清除浮動(dòng) 滾動(dòng)條高度

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/54852.html

相關(guān)文章

導(dǎo)航條css clear清除浮動(dòng) 解決高度塌陷最終版

摘要：講清除浮動(dòng)屬性值清除左右元素浮動(dòng)對本元素造成的影響。代碼導(dǎo)航條解決高度塌陷問題最終版利用一個(gè)占位，清除浮動(dòng)對它的影響從而實(shí)現(xiàn)解決高度塌陷的問題，但是此方法會(huì)在頁面結(jié)構(gòu)中加入一個(gè)占位標(biāo)簽，影響源碼閱讀。 63講導(dǎo)航條css樣式導(dǎo)航條 *{ margin:0px; padding:0px; } .nav{ /*去除每個(gè)前的大圓點(diǎn)*/ list...

lscho 2019-08-29 18:33 評(píng)論0 收藏0
前端筆記之CSS（下）浮動(dòng)&BFC&定位&Hack

摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動(dòng)這是專業(yè)術(shù)語，其實(shí)就是需要我們解決浮動(dòng)帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點(diǎn)是自身。一、浮動(dòng) 1.1 各個(gè)語言的主要知識(shí)點(diǎn) HTML：標(biāo)簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯(cuò)) CSS：　　樣式：　　布局：　　　　標(biāo)準(zhǔn)流(標(biāo)準(zhǔn)文檔流、普通文檔流)：盒子模型(width/height...

番茄西紅柿 2019-04-23 11:44 評(píng)論0 收藏0
CSS學(xué)習(xí)摘要-浮動(dòng)與清除浮動(dòng)

摘要：為了實(shí)現(xiàn)這個(gè)效果，我們需要清除浮動(dòng)。元素被向下移動(dòng)用于清除之前的左右浮動(dòng)。塊格式化上下文對浮動(dòng)定位與清除浮動(dòng)都很重要。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)內(nèi)的元素。且為了不影響接下來的文檔標(biāo)準(zhǔn)流，往往也要收尾做出清除浮動(dòng)。以下從浮動(dòng)到BFC的段落摘自MDN 網(wǎng)絡(luò)開發(fā)者float 浮動(dòng)float CSS屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。該元素從網(wǎng)頁的正常流...

番茄西紅柿 2019-04-23 13:40 評(píng)論0 收藏0
利用clear清除浮動(dòng)的一些問題

摘要：下面這段代碼是用來清除浮動(dòng)帶來的高度塌陷問題上面的代碼的能夠?qū)崿F(xiàn)清除浮動(dòng)的問題嗎因?yàn)閷傩灾荒芸刂圃乇旧砼c前面的浮動(dòng)元素的關(guān)系。是因?yàn)楸举|(zhì)上，浮動(dòng)并沒被清除，我們只是利用屬性解決了浮動(dòng)元素帶來的父級(jí)元素高度塌陷問題。下面這段代碼是用來清除浮動(dòng)帶來的高度塌陷問題 .clearfix:before { content: .; display: block; h...

YancyYe 2019-08-30 15:55 評(píng)論0 收藏0
我腦中飄來飄去的css魔幻屬性

摘要：先來一張圖，看懂的幾個(gè)屬性順便帶上圖片出處，文章講得還可以，理解這張圖片，后面就好理解了。元素根據(jù)標(biāo)簽的屬性決定顯示輸入框還是按鈕。還有，還有近來很火的。最近看到一篇20 個(gè)CSS高級(jí)技巧匯總的匯總，感觸很深，不過我想，與技巧相比，有些常見css布局難題，有時(shí)候更加讓我們的日常開發(fā)變得躊躇沮喪吧。在寫這一篇文章之前，自己還寫過一篇：我所不注意的那些CSS冷知識(shí)，但卻阻止了我做項(xiàng)目的速...

JouyPub 2019-08-29 14:02 評(píng)論0 收藏0