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
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...