資訊專欄INFORMATION COLUMN
摘要：對文檔流的影響在元素之后的元素會被填充到沒有被元素占用的中。我們就需要對進行清除。使用清除的影響可以在元素的父元素中設置。在這個之后的不在這個里，所以不受的影響，即從視覺上消除了的影響。
float對文檔流的影響
在float元素之后的元素會被填充到沒有被float元素占用的normal flow中。如果float元素沒有占滿整行并且接下來的元素可以被填充在float元素周圍，則它會被填充到float元素周圍。這時，如果我們希望在float元素之后的元素不受float元素的影響，依然像普通塊狀元素一樣，新起一行。我們就需要對float進行清除。
使用clear清除float的影響clear可以應用在float元素之后的元素中對float的影響進行清除。
在使用clear:both后，該元素將處在所屬的block formatting context中所有float元素的下面。如果我們只是想取消該元素上面或者相鄰的元素的float的影響，使用clear無法滿足我們的需求。
使用overflow清除float的影響可以在float元素的父元素中設置overflow:hidden|auto|scroll。 這時只要把想另起一行的element放在float元素的父元素的下方即可。
為什么overflow也可以取消float?其實overflow并不是清除了float，而是新建了BFC。BFC類似于編程語言中的作用域，作用域變了，float也就影響不到了。只有clear可以取消float的影響。
如果一個box中只有float元素，那么它是沒有高度的。這時該box會塌陷成一條線。這是因為box在計算高度時，會先從normal flow中抽離float元素。該box無法得到height。這時設置該box的overflow屬性（除visible皆可）可以讓該box擴張成float元素的height。
當一個box的overflow屬性不是visible時，它會新創建一個block formatting context。在這個box之后的element不在這個BFC里，所以不受float的影響，即從視覺上消除了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/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111067.html
摘要：浮動定位的其中一種方法就是使用屬性。例如，是一個內聯元素，它默認的值為和值是不生效的。然而，如果我們將這個內聯元素設置為浮動，那么它的默認值會變成這時候和值就生效了。包裹元素就是將浮動元素置于父元素中，父元素作為容器會置于正常的文件流中。 CSS最大的用處之一就是可以將內容和元素定位到任何我們想要的位置，使我們的設計具有結構，使內容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...
摘要：浮動定位的其中一種方法就是使用屬性。例如，是一個內聯元素，它默認的值為和值是不生效的。然而，如果我們將這個內聯元素設置為浮動，那么它的默認值會變成這時候和值就生效了。包裹元素就是將浮動元素置于父元素中，父元素作為容器會置于正常的文件流中。 CSS最大的用處之一就是可以將內容和元素定位到任何我們想要的位置，使我們的設計具有結構，使內容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...
摘要：元素框相對于之前正常文檔流中的位置發生偏移，并且原先的位置仍然被占據。這些相對于布局來說是基礎的，同時也是非常重要的?？梢钥吹?，浮動元素，其實對于布局來說，是特別危險的。 前言 現在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔?；蛟S是職責越來越大，整體的前端井噴式的發展，使我們只關注了js，而疏遠了css和html。 其實，我們可能經常在聊組件化，咋地咋地。但是，回過頭來思...
摘要：想寫出高效合理的布局，必須以深厚的基礎為前提。現在布局方式主要分為三種傳統布局方案等配合。彈性布局，實現方便，兼容性較好。在環境中的元素按照如下規則渲染和文檔流一樣，元素按照自己類型的布局特性從左到右，從上往下依次排列。 前端css布局知識繁雜，實現方式多種多樣。想寫出高效、合理的布局，必須以深厚的css基礎為前提。為了方便記憶和復習，將css布局要點記錄如下。內容較多，應用方面說的不...
閱讀 1523·2021-09-22 15:35
閱讀 2006·2021-09-14 18:04
閱讀 876·2019-08-30 15:55
閱讀 2449·2019-08-30 15:53
閱讀 2680·2019-08-30 12:45
閱讀 1203·2019-08-29 17:01
閱讀 2577·2019-08-29 15:30
閱讀 3514·2019-08-29 15:09
