浮動和清除浮動

only_do 發布于2019-08-29 11:21 / 3272人閱讀

摘要：浮動在我看來浮動元素都是脫離了軀殼的靈魂，有其神而無其形沒有高度，他們存在于世間，但世人卻無法看見他們脫離文檔流，塊級元素可占據他們的位置，但是風雨等大自然因素卻可以洞察到他們的存在，從而環繞其周圍不脫離文本流，內聯元素可環繞在其周圍。

浮動

在我看來浮動元素都是脫離了軀殼的靈魂，有其神而無其形(沒有高度)，他們存在于世間，但世人卻無法看見他們（脫離文檔流，塊級元素可占據他們的位置），但是風雨等大自然因素卻可以洞察到他們的存在，從而環繞其周圍（不脫離文本流，內聯元素可環繞在其周圍）。

浮動元素的外邊距不會合并

浮動非替換元素時必須設定寬度

浮動元素會脫離文檔流但不會脫離文本流，因而會造成文本環繞效果，而這也是浮動的本意。

不管是塊級元素還是內聯元素，一旦浮動就會變成行內塊元素（即display: inline-block;）

如果浮動元素應用了負外邊距而導致其與相鄰元素重疊，分兩種情況：

行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素之上顯示

塊框與一個浮動元素重疊時，其邊框和背景都在該浮動元素之下顯示，而內容在浮動元素之上顯示

清除浮動

上面提到過浮動元素是不具備高度的，因此會造成父元素高度塌陷，可以通過以下方法來清除浮動。不僅要知道什么方式可以清除浮動，更要知道這些方法是如何清除浮動的。

浮動父元素

CSS 2.1中提到了浮動的一個特性：浮動元素會延伸，從而包含其所有后代元素。但這有點拆了東墻補西墻的意味，不推薦。
應用對象：父元素

overflow屬性

overflow 屬性本意是規定了當內容溢出元素框時發生的事情。但當其屬性值為hidden或auto時，它會自動的清理包含的任何浮動元素，也就意味著它是認可浮動元素的高度的。但在某些情況下，使用該方法會產生滾動條或截斷內容。所以使用時需謹慎。
應用對象：父元素

clear屬性

clear屬性會給該元素添加足夠的外邊距，從而達到清除浮動的效果。clear 屬性的值可以是：left、right、both或none。
應用對象：相鄰元素

偽元素

在沒有現成元素可以應用clear屬性時，我們可以使用偽元素：

 .clearfix::after {
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

注：after 會在元素內容后面而不是元素后面插入一個偽元素。
應用對象：父元素

空元素

當然，我們也可以直接在浮動元素后面添加一個空元素，如下：

同樣可以達到清除浮動的效果，但會增加不必要的代碼，不推薦。

GPU云服務器云服務器清除浮動 html浮動向上浮動上下浮動左右浮動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111594.html

css浮動現象及清除浮動的方法

css浮動現象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現文本環繞圖片的效果。除了用浮動外，目前暫無其他方法實現文本環繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

Kyxy 2019-08-29 16:29 評論0 收藏0
css浮動現象及清除浮動的方法

css浮動現象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現文本環繞圖片的效果。除了用浮動外，目前暫無其他方法實現文本環繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

weakish 2019-08-02 11:19 評論0 收藏0
關于浮動與清除浮動，你應該知道的

摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結一下浮動與清除浮動。首先總結幾個基礎的概念：浮動：設置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內聯元素的排列[通常是文本]；文檔流：在文檔流中，塊元素會單個元素獨占一行接下來我們通過實...

mengbo 2019-08-29 10:57 評論0 收藏0
關于浮動與清除浮動，你應該知道的

摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結一下浮動與清除浮動。首先總結幾個基礎的概念：浮動：設置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內聯元素的排列[通常是文本]；文檔流：在文檔流中，塊元素會單個元素獨占一行接下來我們通過實...

masturbator 2019-08-19 18:40 評論0 收藏0