從問(wèn)題找原因之CSS浮動(dòng)清除

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

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

問(wèn)題描述

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


    
        left-div
        right-div
    
    
        
        center text

問(wèn)題原因

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

清除浮動(dòng)的方法 clear:both

使用

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

將上面的div插入content1尾部時(shí)，無(wú)變化，問(wèn)題并未解決

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

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

BFC(Block formatting context)

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

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

參考文章：清除浮動(dòng)方法解析

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

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

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

相關(guān)文章

理解CSS浮動(dòng)與清除浮動(dòng)

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

劉東 2019-08-30 12:45 評(píng)論0 收藏0
css清除浮動(dòng)的原理

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

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

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

番茄西紅柿 2019-04-23 11:44 評(píng)論0 收藏0
CSS 定位 浮動(dòng)

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

Bamboy 2019-08-28 18:19 評(píng)論0 收藏0
css魔幻屬性跟進(jìn)篇

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

oogh 2019-08-30 14:16 評(píng)論0 收藏0