css清除浮動常用的四種方法實現

iliyaku 發布于2019-08-29 16:14 / 1701人閱讀

摘要：用這種方法清除浮動，會為文檔中增加不必要的結構，不推薦。可以包含浮動元素，所以能實現撐起高度的效果。以上是常用的幾種方法，可以根據場景的不同選擇適合的。

在頁面布局中經常會用到浮動和清除浮動的操作，但之前是知其然而不知其所以然，看過多篇文章后，有了一些深入的了解，特整理下來！

浮動的目的：

最初設計浮動的目的是為了實現文字等內容可圍繞圖像顯示，后來發現浮動方便布局，所以支持浮動任何元素，元素設置浮動后，會脫離原先文檔的普通流中，讓原先各自占據一行的塊元素在一行顯示，代碼展示如下：

不設置浮動顯示如下

如果只設置a塊floagt:left:結果如下：

a塊脫離了原先的文檔普通流，不再占據原先的位置，所以b移移動到原先a的位置，因為a是浮動的，所以會遮擋住b，因為父元素沒有設置高度，所以父元素的高度由子元素決定，現在為b的高度，a浮動后，超出了父元素的高度。

現在把b塊也設置floagt:left，就實現了2個塊狀元素在一行顯示：

現在看到雖然實現了2個塊狀元素在一行顯示，但是父元素的高度現在為0，會影響到兄弟元素的排版，所以我們現在要解決這個問題，就用到了清除浮動的操作

清除浮動的方法

清除浮動后正常的顯示如下圖：

1、在父元素高度固定的情況下，可以直接設置父元素的高度height: 200px即可正常顯示

2、增加塊元素，用clear:both清除

clear：both是清除此元素左右2邊的浮動，所以此元素會獨占一行，在a、b的下一行，但clear仍然在文檔流中，必須包含在父元素內，所以父元素為了包含clear，只能增加高度，最終的效果就達到了高度被撐起來。
用這種方法清除浮動，會為文檔中增加不必要的結構，不推薦。

3、給父元素設置overflow清除浮動

overflow值可以是除visible之外的任何值，都能達到撐起高度的效果，但是scroll是導致滾動條始終存在，hidden會隱藏超出邊框的部分，所以在選擇的時候要格外注意
為什么overflow會實現這種效果呢？是因為它是一個塊級格式化上下文 (Block Fromatting Context)，W3C對BFC的定義如下：
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。
BCF可以包含浮動元素，所以能實現撐起高度的效果。

4、使用after偽類

跟第2個方法原理類似，只是區別在于:clear在html中插入一個div.clear標簽，而content 利用其偽類clear:after在元素內部增加一個類似于div.clear的效果。
以上是常用的幾種方法，可以根據場景的不同選擇適合的。

云服務器 GPU云服務器數據遷移的四種方法 activity的四種狀態對數據倉庫分析的四種方式 java中線程的四種狀態

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

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

【CSS學習】--- float浮動屬性

摘要：浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。不浮動的浮動的三浮動之于塊浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。? 一、前言 ? 　　浮動元素以脫離標準流的方式來實現元素的向左或向右浮動，并且浮動元素還是在原來的行上進行浮動的。float浮動屬性的四個參數：left：元素向左浮動；right：元素向右浮動；none：默認值，元素不浮動；i...

TigerChain 2019-04-23 11:48 評論0 收藏0
CSS的再深入3（更新中···）

摘要：而第一個依然存在，所以就會疊加。宋體行級加只要加了，這個元素就會脫離標準文檔流行級元素加了，脫離了標準文檔流，會變得塊不像塊，行不像行，能設置快高，能并排排列，則也不用給行級標簽加了，沒有意義。在前面，我們學習了標準文檔流，但在實際制作的過程中，用標準文檔流書寫顯然是不現實的，因此，我們來了解幾種脫離標準文檔流的方法： 1.float 浮動 float：left/right；（左浮/右浮） ...

RayKr 2019-04-23 13:19 評論0 收藏0
CSS三欄布局的四種方法

摘要：浮動代碼如下注意元素次序代碼如下左欄左浮動中間自適應右欄右浮動這種方式代碼足夠簡潔與高效，也容易理解后記四種方法其實只有圣杯布局和雙飛翼布局較難理解，但實際上理解了圣杯布局，雙飛翼布局自然就理解了。前言總括：不管是三欄布局還是兩欄布局都是我們在平時項目里經常使用的，也許你不知道什么事三欄布局什么是兩欄布局但實際已經在用，或許你知道三欄布局的一種或兩種方法，但實際操作中也只會依賴那...

RobinQu 2019-08-30 13:14 評論0 收藏0
重拾css(9)——float

摘要：導致這一現象的最根本原因在于被設置了的元素會脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結構被破壞，父子關系解除。 1.引言對于我們所有的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那么一點知識，但卻駕馭不了它各種奇怪的現象。這就是我們又愛又恨的——float。所以，系統的學一學float是非常...

CollinPeng 2019-08-29 12:44 評論0 收藏0
淺析BFC布局的概念以及作用

摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級格式化上下文。是的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何布局，以及和其他元素之間的關系和作用。BFC的概念以及作用 BFC的定義： (Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內...

荊兆峰 2019-04-23 13:29 評論0 收藏0