CSS：清除浮動（額外標簽法、父級添加overflow、偽元素法、雙偽元素法）

来源:https://www.cnblogs.com/zhai1997/archive/2020/06/19/13166924.html
-Advertisement-
Play Games

1、清除浮動的原因 （1）不清除浮動的情況： 由於父級的子元素不方便給高度（不給高度的時候父盒子的大小由裡面包含的子盒子來決定），但是，子元素為浮動的又不占有位置，導致父級的盒子高度為0的時候就會影響下麵的標準流的盒子。 <!DOCTYPE html> <html> <head> <meta cha ...


1、清除浮動的原因

（1）不清除浮動的情況：

由於父級的子元素不方便給高度（不給高度的時候父盒子的大小由裡面包含的子盒子來決定），但是，子元素為浮動的又不占有位置，導致父級的盒子高度為0的時候就會影響下麵的標準流的盒子。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div class="bigbox">
            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
        
        </div>
        <div class="test">
            
        </div>
    </body>

</html>

 

 

 由於浮動元素不占有原來的文檔流的位置，因此會對後面的元素的佈局產生影響。

（2）需要清除浮動的情況

父級沒有高度

子盒子浮動了

影響下麵的佈局了

 

2、浮動的清除

（1）屬性值（clear）

right：清除左側有浮動的元素

left：清除右側有浮動的元素

both：左右側都清除

（2）額外標簽法：

也稱為隔牆法，會在浮動元素的末尾添加一個空標簽（必須是塊元素），例如：<div style="clear: both"></div>或者其他標簽，例如：<br>等

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
            .clear{
                clear: both;
            }
        </style>
    </head>

    <body>
        <div class="bigbox">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="clear">
                
            </div>
        
        </div>
        <div class="test"></div>
    </body>

</html>

 

 

 此時，父盒子的高度會隨子盒子的多少而改變，並且不會影響後面的佈局。

（3）父級添加（添加overflow）

可以給父級元素添加overflow屬性，將其屬性值設置為hidden、auto或scroll

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                overflow: hidden;
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div class="bigbox">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>    
        </div>
        <div class="test"></div>
    </body>

</html>

 

 

 （4）偽元素法：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
            .clearfix:after{
                content: "";
                display: block;
                height: 0px;
                clear: both;
                visibility: hidden;
            }
            .clearfix{/*IE6\7專有*/
                *zoom: 1;
            }
        </style>
    </head>

    <body>
        <div class="bigbox clearfix">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>    
        </div>
        <div class="test"></div>
    </body>

</html>

 

 

 （5）雙偽元素清除浮動（使用了before和after來清除浮動）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
            .clearfix:before,.clearfix:after{
                content: "";
                display: table;
            }
            .clearfix:after{
                clear: both;
            }
            .clearfix{
                *zoom: 1;
            }
        </style>
    </head>

    <body>
        <div class="bigbox clearfix">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>    
        </div>
        <div class="test"></div>
    </body>

</html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Oracle中獲取字元串下標、截取字元串
    Oracle中獲取字元串下標、截取字元串 獲取下標： SELECT INSTR('AAA-BBB-CCC-DDD', '-', 1, 1) as 字元位置 FROM dual 截取字元串： SELECT SUBSTR('AAA-BBB-CCC-DDD', 1, 3) as 截取字元串 FROM DU ...
  • MySQL學習筆記（4）：數據類型
    本文更新於2019-06-19，使用MySQL 5.7，操作系統為Deepin 15.4。 數值類型 整數類型 type[(m)] [UNSIGNED] [ZEROFILL] [AUTO_INCREMENT] 類型 位元組 最小值 最大值 TINYINT 1 有符號-128，無符號0 有符號127，無 ...
  • 學習 SQL Server （3） ：數據表中 數據的基本操作（插入，刪除，修改）
    --1.使用SQL語句創建名稱為SHWLW-News-DB的資料庫。（3分）create database SHWLW_News_DBuse SHWLW_News_DB--2.按數據字典要求創建新聞分類表結構。（5分）新聞分類(NewsType)表結構：create table NewsType( ...
  • 學習 SQL Server （2） ： 數據表約束
    --數據表約束：通過制定一些規則，使存入資料庫的數據規範、正確、完整。 --非空約束 該欄位不能為空 關鍵字:not null --唯一約束 該欄位的值在本表不能重覆，可以為null，但只能有一次。關鍵字 unique --預設約束 給該欄位一個預設值，空的時候按預設值來，不空的按你輸入的來 def ...
  • 學習 SQL Server （1） ：資料庫的基本操作（創建，刪除，修改，分離附加）
    --create database 資料庫名create database Unit2_1712A --使用資料庫【打開資料庫】--use 資料庫名use Unit2_1712A --刪除資料庫--drop database 資料庫名drop database Unit2_1712A --備份資料庫 ...
  • 深入理解iOS開發中的鎖
    摘要 本文的目的不是介紹 iOS 中各種鎖如何使用，一方面筆者沒有大量的實戰經驗，另一方面這樣的文章相當多，比如 iOS中保證線程安全的幾種方式與性能對比、iOS 常見知識點（三）：Lock。本文也不會詳細介紹鎖的具體實現原理，這會涉及到太多相關知識，筆者不敢誤人子弟。 本文要做的就是簡單的分析 i ...
  • Flutter學習筆記（35）--通知Notification
    通知的NotificationListener和我們之前寫的事件的Listener一樣，都是功能性的組件，而且也都是從子節點順著widget樹向上冒泡，不同的是，事件的Listener不可以被終止，但是通知的NotificationListener是可以被終止的。 是否終止根據Notificatio... ...
  • JavaScript連載18-工廠模式創建對象、自定義構造函數
    一、工廠模式創建對象 1. 常見創建對象方式 （1）對象字面量 var x1 = { "name":"小猴", age:22, sex:"女", dolt:function () { console.log("我是IT的小學生"); } } （2）new Object()創建對象 var x2 = ...
一周排行
    -Advertisement-
    Play Games
  • 如何基於surging跨網關跨語言進行緩存降級
    基於.NET Framework 4.8 開發的深度學習模型部署測試平臺，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景，同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱，重啟開發之路
    十年沉澱，重啟開發之路 十年前，我沉浸在開發的海洋中，每日與代碼為伍，與演算法共舞。那時的我，滿懷激情，對技術的追求近乎狂熱。然而，隨著歲月的流逝，生活的忙碌逐漸占據了我的大部分時間，讓我無暇顧及技術的沉澱與積累。 十年間，我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者，我見證了 ...
  • C#.NET體系圖文概述—2024最全總結
    C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺，平臺包含了語言規範、工具、運行，支持開發各種應用，如Web、移動、桌面等。.NET框架有多個實現，如.NET Framework、.NET Core（及後續的.NET 5+版本），以及社區版本M... ...
  • 班級擂臺（光榮）榜 - 極簡教育小工具
    前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫，記錄了使用電腦模擬，模擬PLC，直至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1. PLC開發編程環境GX Works2，GX Works2下載鏈接 https:// ...
  • web server apache tomcat11-31-websocket
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • day31-jQuery
    1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝 ...
  • aardio爬蟲) 實戰篇：逆向有道翻譯web介面
    前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了，這篇文章整點js代碼來測一下bug。測試網站：https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向（MD5加密，AES加密）附完整源碼 ...
  • 面試官：這就是你理解的Java多線程基礎？
    引言 現代的操作系統（Windows，Linux，Mac OS）等都可以同時打開多個軟體（任務），這些軟體在我們的感知上是同時運行的，例如我們可以一邊瀏覽網頁，一邊聽音樂。而CPU執行代碼同一時間只能執行一條，但即使我們的電腦是單核CPU也可以同時運行多個任務，如下圖所示，這是因為我們的 CPU 的 ...
  • Python文本統計與分析從基礎到進階
    掌握使用Python進行文本英文統計的基本方法，並瞭解如何進一步優化和擴展這些方法，以應對更複雜的文本分析任務。 ...
  • Redis多數據源，看這篇就夠了
    背景 Redis多數據源常見的場景： 分區數據處理：當數據量增長時，單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源，可以將數據分區存儲在不同的實例中，使得數據處理更加高效。 多租戶應用程式：對於多租戶應用程式，每個租戶可以擁有自己的Redis數據源，以確保數據隔離和安全性。 ...
所有分類