從問題找原因之CSS浮動清除

atinosun 發(fā)布于2019-08-29 16:34 / 2022人閱讀

摘要：問題描述浮動元素導(dǎo)致的后面標(biāo)簽居中對齊失敗，如下圖問題原因浮動元素造成的影響，文本行內(nèi)元素行內(nèi)塊元素會采取環(huán)繞的方式排列在浮動元素周圍。若不設(shè)置浮動元素父元素的高度，則也會正常垂直居中，但浮動未清除。

問題描述

浮動元素導(dǎo)致的后面img標(biāo)簽居中對齊“失敗”，如下圖


    
        left-div
        right-div
    
    
        
        center text

問題原因

浮動元素造成的影響，文本、行內(nèi)元素、行內(nèi)塊元素會采取環(huán)繞的方式排列在浮動元素周圍。圖中right-div的高度為51px，高于父級div的50px，故img標(biāo)簽居中是相對于(父級div寬度)-(right-div寬度)來計算的,所以偏離了正常水平居中的位置。若將p標(biāo)簽放到第img標(biāo)簽前面去，則不會產(chǎn)生這種問題。但最好的辦法還是清除浮動。

清除浮動的方法 clear:both

使用

將上面的div插入content1和content2之間時，會造成content1和content2之間有一條縫隙，如果看不清，可以將right-div的高度調(diào)大

將上面的div插入content1尾部時，無變化，問題并未解決

使用偽元素，結(jié)果與上面方式2一致，未能解決問題

.clearfix:before,
.clearfix:after{
  content: "";
  display: table;
  clear: both;
}
.clearfix: { zoom:1 } //觸發(fā)IE的haslayout.

BFC(Block formatting context)

設(shè)置content1樣式overflow:hidden,完美解決問題

總結(jié)：總而言之，本次問題是由于浮動和設(shè)置了浮動元素父級元素高度共同作用的結(jié)果，不是僅僅清除浮動就能完全解決的。若不設(shè)置浮動元素父元素的高度，則img也會正常垂直居中，但浮動未清除。若只清除浮動，而不解決高度突出的問題，則img不能正常垂直居中。設(shè)置overflow:hidden剛好兩點都做到了。

參考文章：清除浮動方法解析

云服務(wù)器 GPU云服務(wù)器清除浮動浮動-前端-css 問題原因 html5浮動問題

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

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

相關(guān)文章

理解CSS浮動與清除浮動

摘要：那我們舉個栗子當(dāng)先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同。總結(jié)總結(jié)下來，浮動與清除浮動的順序關(guān)系如下設(shè)置元素浮動，元素脫離文檔流，不計算高度。本文主要探討兩個問題：為什么CSS設(shè)置浮動會引起父元素塌陷為什么設(shè)置clear:both能清除浮動，并撐開父元素。起因 CSS的浮動，算是我在寫網(wǎng)頁時用的最多的屬性之一。但...

劉東 2019-08-30 12:45 評論0 收藏0
css清除浮動的原理

摘要：最近學(xué)習(xí)發(fā)現(xiàn)了高度塌陷時候要清除浮動為了理解清楚浮動原理網(wǎng)上找了不少資料發(fā)現(xiàn)都寫的不是很清楚而且都是一模一樣的內(nèi)容我在里分享一下我對清楚浮動原理的理解如果你已經(jīng)很了解什么是浮動和浮動的效果你可以直接跳轉(zhuǎn)到三如何清除浮動重點閱讀一什么是浮動最近學(xué)習(xí)css發(fā)現(xiàn)了高度塌陷時候要清除浮動,為了理解清楚浮動原理,網(wǎng)上找了不少資料,發(fā)現(xiàn)都寫的不是很清楚,而且都是一模一樣的內(nèi)容,我在里分享一下我對清楚浮動...

番茄西紅柿 2019-04-23 13:30 評論0 收藏0
前端筆記之CSS（下）浮動&BFC&定位&Hack

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

番茄西紅柿 2019-04-23 11:44 評論0 收藏0
CSS 定位浮動

摘要：概覽為定位和浮動提供了一些屬性，利用這些屬性，可以建立各種布局，極大提高頁面的表現(xiàn)力。定位屬性規(guī)定元素的定位類型。絕對定位元素框從文檔流完全刪除，并相對于其包含塊定位。在使用相對定位時，無論是否進行移動，元素仍然占據(jù)原來的空間。概覽 CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立各種布局，極大提高HTML頁面的表現(xiàn)力。定位的基本思想很簡單，它允許你定義元素框相對于其正常...

Bamboy 2019-08-28 18:19 評論0 收藏0
css魔幻屬性跟進篇

摘要：中是這樣定義的屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。其同樣適用于設(shè)置屬性為絕對定位或固定定位的內(nèi)聯(lián)元素。至于為什么，可以理解為內(nèi)聯(lián)元素沒有盒模型，其高度由內(nèi)容決定。白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關(guān)的文章，文章絕大部分是自己工作總結(jié)得來，另一部分是平日sf回答的與面試中向面試官交流學(xué)到的，都是一...

oogh 2019-08-30 14:16 評論0 收藏0