資訊專(zhuān)欄INFORMATION COLUMN
摘要：對(duì)文檔流的影響在元素之后的元素會(huì)被填充到?jīng)]有被元素占用的中。我們就需要對(duì)進(jìn)行清除。使用清除的影響可以在元素的父元素中設(shè)置。在這個(gè)之后的不在這個(gè)里，所以不受的影響，即從視覺(jué)上消除了的影響。
float對(duì)文檔流的影響
在float元素之后的元素會(huì)被填充到?jīng)]有被float元素占用的normal flow中。如果float元素沒(méi)有占滿整行并且接下來(lái)的元素可以被填充在float元素周?chē)?，則它會(huì)被填充到float元素周?chē)?。這時(shí)，如果我們希望在float元素之后的元素不受float元素的影響，依然像普通塊狀元素一樣，新起一行。我們就需要對(duì)float進(jìn)行清除。
使用clear清除float的影響clear可以應(yīng)用在float元素之后的元素中對(duì)float的影響進(jìn)行清除。
在使用clear:both后，該元素將處在所屬的block formatting context中所有float元素的下面。如果我們只是想取消該元素上面或者相鄰的元素的float的影響，使用clear無(wú)法滿足我們的需求。
使用overflow清除float的影響可以在float元素的父元素中設(shè)置overflow:hidden|auto|scroll。 這時(shí)只要把想另起一行的element放在float元素的父元素的下方即可。
為什么overflow也可以取消float?其實(shí)overflow并不是清除了float，而是新建了BFC。BFC類(lèi)似于編程語(yǔ)言中的作用域，作用域變了，float也就影響不到了。只有clear可以取消float的影響。
如果一個(gè)box中只有float元素，那么它是沒(méi)有高度的。這時(shí)該box會(huì)塌陷成一條線。這是因?yàn)閎ox在計(jì)算高度時(shí)，會(huì)先從normal flow中抽離float元素。該box無(wú)法得到height。這時(shí)設(shè)置該box的overflow屬性（除visible皆可）可以讓該box擴(kuò)張成float元素的height。
當(dāng)一個(gè)box的overflow屬性不是visible時(shí)，它會(huì)新創(chuàng)建一個(gè)block formatting context。在這個(gè)box之后的element不在這個(gè)BFC里，所以不受float的影響，即從視覺(jué)上消除了float的影響。
參考https://developer.mozilla.org/en-US/docs/Web/CSS/float#Specifications
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formattin...
http://www.w3.org/TR/CSS21/visuren.html
https://css-tricks.com/all-about-floats/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111067.html
摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...
摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...
摘要：元素框相對(duì)于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)。這些相對(duì)于布局來(lái)說(shuō)是基礎(chǔ)的，同時(shí)也是非常重要的。可以看到，浮動(dòng)元素，其實(shí)對(duì)于布局來(lái)說(shuō)，是特別危險(xiǎn)的。 前言 現(xiàn)在，我們被稱(chēng)為前端工程師。然而，早年給我們的稱(chēng)呼卻是頁(yè)面仔?；蛟S是職責(zé)越來(lái)越大，整體的前端井噴式的發(fā)展，使我們只關(guān)注了js，而疏遠(yuǎn)了css和html。 其實(shí)，我們可能經(jīng)常在聊組件化，咋地咋地。但是，回過(guò)頭來(lái)思...
摘要：想寫(xiě)出高效合理的布局，必須以深厚的基礎(chǔ)為前提。現(xiàn)在布局方式主要分為三種傳統(tǒng)布局方案等配合。彈性布局，實(shí)現(xiàn)方便，兼容性較好。在環(huán)境中的元素按照如下規(guī)則渲染和文檔流一樣，元素按照自己類(lèi)型的布局特性從左到右，從上往下依次排列。 前端css布局知識(shí)繁雜，實(shí)現(xiàn)方式多種多樣。想寫(xiě)出高效、合理的布局，必須以深厚的css基礎(chǔ)為前提。為了方便記憶和復(fù)習(xí)，將css布局要點(diǎn)記錄如下。內(nèi)容較多，應(yīng)用方面說(shuō)的不...
閱讀 1605·2021-09-22 15:35
閱讀 2094·2021-09-14 18:04
閱讀 965·2019-08-30 15:55
閱讀 2513·2019-08-30 15:53
閱讀 2748·2019-08-30 12:45
閱讀 1266·2019-08-29 17:01
閱讀 2644·2019-08-29 15:30
閱讀 3568·2019-08-29 15:09
