CSS 清除浮動

来源:https://www.cnblogs.com/yuzhihui/archive/2023/02/02/17086973.html
-Advertisement-
Play Games

在元素設置浮動(float)後,該元素就會脫離文檔流,並且向左或向右浮動,直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。 一、浮動元素對佈局的影響 1.1、浮動元素造成父元素的高度塌陷: 原來的父元素高度是內部元素撐開的,但是當內部元素浮動後,脫離文檔流浮動起來,那父元素的高度就坍塌,變為高度 0 ...


在元素設置浮動(float)後,該元素就會脫離文檔流,並且向左或向右浮動,直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。

一、浮動元素對佈局的影響

1.1、浮動元素造成父元素的高度塌陷:

原來的父元素高度是內部元素撐開的,但是當內部元素浮動後,脫離文檔流浮動起來,那父元素的高度就坍塌,變為高度 0px。

<style>
    .container {
        border: 1px solid blue;
    }
    
    .box {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: red;
        float: left;
    }
</style>

<div class="container">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</div>

上述代碼中 container 元素的高度將會是 0px。

1.2、浮動元素對鄰近非浮動元素造成影響:

<style>
     .container {
         border: 1px solid blue;
     }
    
     .box0 {
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: red;
         float: left;
     }
    
     .box1 {
         width: 200px;
         height: 200px;
         background-color: green;
     }
</style>

<div class="container">
     <div class="box0"></div>
     <div class="box0"></div>
     <div class="box0"></div>
     <div class="box1"></div>
</div> 

上述代碼中 box1 的位置受到前面元素浮動的影響,而且不管 box1 是在 container 裡面還是外面都會受到影響。

二、清除浮動(解決浮動元素影響鄰近非浮動元素問題

CSS 清除浮動是指在使用浮動佈局時,解決浮動元素對非浮動元素的影響的問題。

當元素設置為浮動時,它會從文檔流中“漂浮”出來,不再占據原來的空間,導致後面的元素不能正確地換行顯示。為瞭解決這個問題,需要使用清除浮動的方法。

常見的清除浮動方法有以下幾種:

1、在浮動元素後添加一個空的容器,並給該容器設置 clear 屬性:

<div style="position: relative;">
  <div style="float: left;">...</div>
  <div style="float: left;">...</div>
  <div style="clear: both;"></div>
</div>

2、給父元素設置 overflow 屬性:

<div style="overflow: hidden;">...</div>

3、使用偽元素:

.clearfix::after {
   content: "";
   display: table;
   clear: both;
}

將以上代碼添加到需要清除浮動的元素的 CSS 中,併在 HTML 中將該元素的 class 設置為 clearfix。這樣,就可以通過使用偽元素清除浮動了。

4、使用 CSS flex 佈局:

在使用 CSS flex 佈局時,父元素預設會包含所有的子元素,因此不需要進行清除浮動。

<div style="display: flex;">
  <div style="float: left;">...</div>
  <div style="float: left;">...</div>
</div>

5、使用 CSS grid 佈局:

在使用 CSS grid 佈局時,父元素預設會包含所有的子元素,因此不需要進行清除浮動。

<div style="display: grid;">
  <div style="float: left;">...</div>
  <div style="float: left;">...</div>
</div>

上是 CSS 清除浮動的常見方法,需要根據具體的使用場景和需求來選擇最適合的方法。

三、解決浮動元素造成父元素高度塌陷問題

在開發過程中,有時需要解決浮動元素對父元素高度的影響,這時也可以使用以下方法解決:

1、使用絕對定位:

通過將浮動元素設置為絕對定位,可以避免浮動元素對父元素高度的影響。

<div style="position: relative;">
  <div style="position: absolute;">...</div>
  <div style="position: absolute;">...</div>
</div>

2、使用 table 佈局:

通過將父元素設置為表格佈局,可以避免浮動元素對父元素高度的影響。

<div style="display: table;">
  <div style="display: table-cell;">...</div>
  <div style="display: table-cell;">...</div>
</div>

這些方法可以幫助解決浮動元素對父元素高度的影響問題,但是需要根據具體的使用場景和需求來選擇最適合的方法。

 

作者:yuzhihui
出處:http://www.cnblogs.com/yuzhihui/ 聲明:歡迎任何形式的轉載,但請務必註明出處!!!
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本教程說明如何在當Windows系統無法正常啟動時,採取重建活動分區的方式來嘗試修複,目的在於不使用第三方軟體和不重裝系統的前提下對系統啟動問題進行最小代價修複。 該教程來源為windows-10-bootrec-fixboot-access-is-denied,本文僅對其稍作修改。 如果系統啟動後 ...
  • 一、資源下載 Keil5下載鏈接: https://www.keil.com/download/product/ STM32 標準庫晶元包下載鏈接: https://www.keil.com/dd2/pack/ JDK下載鏈接: https://www.oracle.com/java/technol ...
  • 一:背景 1. 講故事 在有關SQLSERVER的各種參考資料中,經常會看到如下四種事務隔離級別。 READ UNCOMMITTED READ COMMITTED SERIALIZABLE REPEATABLE READ 隨之而來的是大量的文字解釋,還會附帶各種 臟讀, 幻讀, 不可重覆讀 常常會把 ...
  • 1 命名規範 1、【強制】庫名、表名、欄位名必須使用小寫字母並採用下劃線分割,禁止拼音英文混用;(禁用-,-相當於運算符) 2、【建議】庫名、表名、欄位名在滿足業務需求的條件下使用最小長度; 如information --> info;address --> addr等 3、【強制】庫名、表名、欄位 ...
  • 閱識風雲是華為雲信息大咖,擅長將複雜信息多元化呈現,其出品的一張圖(雲圖說)、深入淺出的博文(雲小課)或短視頻(雲視廳)總有一款能讓您快速上手華為雲。更多精彩內容請單擊此處。 摘要:為了擴展主節點的讀請求能力,DDS提供具備獨立連接地址的只讀節點,適合獨立系統直連訪問,以緩解大量讀請求給主節點造成的 ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: KAiTO 文章來源:GreatSQL社區原創 往期回顧 圖文結合帶你搞懂MySQL日誌之relay log(中繼日誌) 圖文結合帶你搞懂MyS ...
  • 慢查詢指的是資料庫中查詢時間超過了指定的閾值的SQL,這類SQL通常伴隨著執行時間長、伺服器資源占用高、業務響應慢等負面影響。隨著攜程酒店業務的不斷擴張,再加上大量的SQLServer轉MySQL項目的推進,慢查詢的數量正在飛速增長,每日的報警量也居高不下,因此慢查詢的治理優化已經是刻不容緩,此文主... ...
  • 1:apk文件結構 如圖所示: assets: 存放應用程式的靜態資源文件,如圖片資源,json配置文件,html離線資源等。註意,assets目錄下是支持任意深度的子目錄。 res: 規定的指定文件,圖標,圖片資源等,且res下文件都會生成對應的資源id, 但是assets下是不會的。 lib: ...
一周排行
    -Advertisement-
    Play Games
  • 在本篇教程中,我們學習瞭如何使用 Taurus.MVC WebMVC 框架創建一個簡單的頁面。 我們創建了一個控制器並編寫了一個用於呈現頁面的方法,然後創建了對應的視圖,並最終成功運行了應用程式。 在下一篇教程中,我們將繼續探索 Taurus.MVC WebMVC 框架的更多功能和用法。 ...
  • 一:背景 1. 講故事 很多.NET開發者在學習高級調試的時候,使用sos的命令輸出會發現這裡也看不懂那裡也看不懂,比如截圖中的這位朋友。 .NET高級調試屬於一個偏冷門的領域,國內可觀測的資料比較少,所以很多東西需要你自己去探究源代碼,然後用各種調試工具去驗證,相關源代碼如下: coreclr: ...
  • 我一直都以為c中除以2的n次方可以使用右移n位代替,然而在實際調試中發現並不都是這樣的。是在計算餘數是發現了異常 被除數:114325068 右移15計算結果:3488 除法取整計算結果:3489 右移操作計算餘數:33772 除法取整計算餘數:1005 顯然:這是不一樣的。 移位操作是一條cpu指 ...
  • 在上一篇文章中,我們介紹了ReentrantLock類的一些基本用法,今天我們重點來介紹一下ReentrantLock其它的常用方法,以便對ReentrantLock類的使用有更深入的理解。 ...
  • Excelize 是 Go 語言編寫的用於操作電子錶格辦公文檔的開源基礎庫,2024年2月26日,社區正式發佈了 2.8.1 版本,該版本包含了多項新增功能、錯誤修複和相容性提升優化。 ...
  • 雲採用框架(Cloud Adoption Framework,簡稱CAF)為企業上雲提供策略和技術的指導原則和最佳實踐,幫助企業上好雲、用好雲、管好雲,併成功實現業務目標。本雲採用框架是基於服務大量企業客戶的經驗總結,將企業雲採用分為四個階段,並詳細探討企業應在每個階段採取的業務和技術策略;同時,還 ...
  • 與TXT文本文件,PDF文件更加專業也更適合傳輸,常用於正式報告、簡歷、合同等場合。項目中如果有使用Java將TXT文本文件轉為PDF文件的需求,可以查看本文中介紹的免費實現方法。 免費Java PDF庫 本文介紹的方法需要用到Free Spire.PDF for Java,該免費庫支持多種操作、轉 ...
  • 指針和引用 當我們需要在程式中傳遞變數的地址時,可以使用指針或引用。它們都可以用來間接訪問變數,但它們之間有一些重要的區別。 指針是一個變數,它存儲另一個變數的地址。通過指針,我們可以訪問存儲在該地址中的變數。指針可以被重新分配,可以指向不同的變數,也可以為NULL。指針使用*運算符來訪問存儲在地址 ...
  • 即使再小再簡單的需求,作為研發開發完畢之後,我們可以直接上線麽?其實很多時候事故往往就是由於“不以為意”發生的。事故的發生往往也遵循“墨菲定律”,這就要求我們更要敬畏線上,再小的需求點都需要經過嚴格的測試驗證才能上線。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、是什麼 許可權是對特定資源的訪問許可,所謂許可權控制,也就是確保用戶只能訪問到被分配的資源 而前端許可權歸根結底是請求的發起權,請求的發起可能有下麵兩種形式觸發 頁面載入觸發 頁面上的按鈕點擊觸發 總的來說,所有的請求發起都觸發自前端路由或 ...