CSS盒子的浮動

来源:http://www.cnblogs.com/huanshu000/archive/2017/09/10/7500067.html
-Advertisement-
Play Games

在標準流中,一個塊級元素在水平方向會自動伸展,直到包含它的元素的邊界;而在豎直方向和兄弟元素依次排列,不能併排。使用“浮動”方式後,塊級元素的表現就會有所不同。 CSS中有一個float屬性,預設為none,也就是標準流通常的情況。如果將float屬性的值設置為left或right,元素就會向其父元 ...


在標準流中,一個塊級元素在水平方向會自動伸展,直到包含它的元素的邊界;而在豎直方向和兄弟元素依次排列,不能併排。使用“浮動”方式後,塊級元素的表現就會有所不同。
      CSS中有一個float屬性,預設為none,也就是標準流通常的情況。如果將float屬性的值設置為left或right,元素就會向其父元素的左側或右側靠緊,同時預設情況下,盒子的寬度不在伸展,而是根據盒子裡面的內容的寬度來確定。

準備基礎代碼

      浮動的性質比較複雜,這裡先製作一個基礎的頁面,代碼如下。後面一系列的實驗將基於下麵的代碼為基礎,並根據不同的知識點添加不同的新代碼。

複製代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
    margin:15px;
    font-family:Arial; font-size:12px;
}
.father {
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
}
.father div {
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
}
.father p {
    border:1px dashed #111111;
    background-color:#ff90ba;
}   
.son1 {
/* 這裡設置son1的浮動方式*/
}
.son2 {
/* 這裡設置son1的浮動方式*/
}
.son3 {
/* 這裡設置son1的浮動方式*/
}
</style>
</head>
<body> <div class="father"> <div class="son1">Box-1</div> <div class="son2">Box-2</div> <div class="son3">Box-3</div> <p>這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字.</p> </div> </body> </html>
複製代碼

      上面的代碼定義了4個<div>塊,其中的一個父塊,另外3個是它的子塊。為了便於觀察,將各個塊都加上了邊框以及背景顏色,並且讓<body>標記以及各個div之間有一定的margin值。如果3個子div都沒有任何浮動設置,就為標準流中的盒子狀態。在父盒子中,4個盒子各自向右伸展,豎直方向依次排列,如下圖。

       下麵開始在這個基礎上做實驗,通過一些列的實驗,就可以充分體會到浮動盒子具有哪些性質了。 

實驗一:設置第一個浮動的div

.son1 {
       float: left;      
}

      效果如下圖,可以看到標準流中的Box-2的文字在圍繞著Box-1排列,而此時Box-1的寬度不再伸展,而是能容納下內容的最小寬度。與此同時,由於Box-1脫離了標準流,而標準流中的Box-2會頂到原來Box-1的位置,因此Box-2的左邊框與Box-1的左邊框重合

實驗二:設置第二個浮動的div

      繼續將Box-2的float屬性設置為left,此時可以看到Box-2也變為根據內容確定寬度,並使Box-3的文字圍繞Box-2排列。從下圖中可以清晰的看出,Box-3的左邊框仍在Box-1左邊框下麵,否則Box-1和Box-2之間的空白不會是深色,這個深色實際上就是Box-3的背景色,Box-1和Box-2之間的空白是由二者的margin構成的。

實驗三:設置第三個浮動的div 

      接下來,我們把Box-3也設置為向左浮動,此時從下圖中可以清楚的看到文字所在的盒子的範圍,以及文字會圍繞浮動的盒子排列。

實驗四:改變浮動方向

      將Box-3改為向右浮動,即float:right。此時效果如下圖。

      可以看到Box-3移動到了最右端,文欄位落盒子的範圍沒有改變,但文字卻夾在了Box-2和Box-3之間。此時,如果把瀏覽器視窗慢慢調整變窄,瀏覽器視窗就無法在一行中容納Box-1到Box-3,Box-3會被擠到下一行中,但仍然保持向右浮動,這時文字會自動佈滿空間。

實驗五:再次改變浮動的方向

      將Box-2改為向右浮動,Box-3改為向左浮動。從下圖可以看出佈局沒有變化,只是Box-2和Box-3交換了位置。 

      現在,再次回到實驗中,把瀏覽器視窗慢慢變窄,當瀏覽器視窗無法在一行中容納Box-1到Box-3時,和上一個實驗一樣會有一個Box被擠到下一個。那麼這次被擠到下一行的是哪一個呢?答案是在HTML中寫在後面的,也就是Box-3會被擠到下一行中,但仍然保持向左浮動,會到下一行的左端,這時文字仍然會自動排列,如下圖。

實驗六:全部向左移動

      下麵把3個Box都設置為向左浮動,然後再在Box-1中增加一行,使它的高度比原來高一些,如下圖所示。

      那麼請想一想,如果繼續把瀏覽器的視窗變窄,結果會如何呢?Box-3會被擠到下一行,那麼它會在Box-1的下麵,還是Box-2的下麵呢?答案如下圖。

      Box-3被擠到下一行並向左移動,發現Box-1比Box-2高出一塊兒,這樣Box-3就會被卡住,進而停留在Box-2的下麵。說道最後,需要非常註意的是,如果某個盒子被設置為float,那麼它將脫離標準流,其後面的標準流中的盒子將不再受它影響。

實驗七:使用clear屬性清除浮動的影響

      以使文字的左右兩側同時圍繞浮動的盒子。首先將Box-1到Box-2的浮動都改為float:left,而Box-3的浮動為float:right,之後再將Box-3的內容修改為: 

<div class="son3">
    Box-3<br>
    Box-3<br>
    Box-3<br>
    Box-3
</div>

      效果如下圖:

      如果不希望文字圍繞浮動的盒子,又該如何呢?此時對圍繞文字所在標簽<p>的樣式進行如下修改後,從下麵的效果圖中可以看出,段落的上邊界向下移動,直到文字不受左邊的兩個盒子影響位置,但仍然受到Box-3的影響。

.father p {
    border:1px dashed #111111;
    background-color:#ff90ba;
    clear:left;
}

      接著,將clear屬性設置為right,將看到如下效果。由於Box-3比較高,因此清除了右邊的影響,自然左邊也就不會受到影響了。還有說明的是可以將clear屬性設置為both,從直接消除左右兩邊浮動盒子的影響。 

實驗八:擴展盒子的高度

      關於clear的應用,這裡再給出一個例子,將文字所在的段落<p>標簽刪除,這時在父div裡面只有3個浮動的盒子,它們都不在標準流中,這時瀏覽器的顯示效果如下:

      可以看到,文欄位落被刪除以後,父div的範圍縮成一條,是由padding和border構成的,也就是說,一個div的範圍是由它裡面的標準流內容決定的,與裡面的浮動內容無關。下麵將介紹一種方法以使父div的範圍能夠包含3個浮動的子div,見如下修改後的HTML代碼和與之對應的效果圖。

複製代碼
<div class="father">
    <div class="son1">Box-1<br>Box-1</div>
    <div class="son2">Box-2</div>
    <div class="son3">
        Box-3<br>
        Box-3<br>
        Box-3<br>
        Box-3
    </div>
    <div style="clear:both;border:0;padding:0;margin:0;"></div>
</div>
複製代碼

註:該篇博客源自《CSS設計徹底研究》中的第四章,書中的例子簡明扼要、通俗易懂,因此特copy下來與大家分享,同時也便於今後自己的線上查閱。 


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

-Advertisement-
Play Games
更多相關文章
  • <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>W3sCSS盒子模型</title> <!--其實就是div加css樣式設計出一些邏輯頁面--> <link rel="stylesheet" href="tzy. ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <script src="jquery.js"></script> </head> <body> <form action=" ...
  • 【正則表達式】1、正則表達式包括兩部分: ① 定義正則表達式的規則 ② 定義正則表達式的模式(i/g/m)2、聲明正則表達式: ① 字面聲明 : var reg = /表達式規則/表達式模式 ② 使用new關鍵字: var reg = new RegExp("表達式規則","表達式模式") eg: ...
  • 上文我們講到了options的配置和獲取數據的方式,本文,我們繼續深入options的配置 一、html-webpack-plugin插件中的options除了自己定義了一些基本配置外,我們是可以任意的添加自定義的數據 webpack.dev.config.js文件: 我們在webpack.dev. ...
  • 一、概述 和select下拉列表相比,jquery+css實現的下拉列表具有更好的靈活性,第二部分的代碼為下拉列表的實現。 二、代碼 下拉列表效果如下: 下拉列表的選項為動態追加,使用on方法,採用事件委派機制,響應選項的單擊事件。 經過測試,以下代碼在Firefox 55.0和Safari 10. ...
  • 還記得我們上文中的index.html文件嗎? 那裡面的script標簽還是寫死的index.bundle.js文件,那麼怎麼把他們變成動態的index.html文件,這個動態生成的index.html文件會動態引入我們打包後生成的js文件呢?,我們可以使用插件html-webpack-plugin ...
  • 一、定義 用來描述或匹配一系列符合某個規則的字元串信息的字元串。 通常用來檢驗字元串是否符合某些規則,或者匹配(替換)被操作的字元串中的某些信息。 二、基本語法 1.以“/”開始,以另一個“/”結束 2.結束符“/”後可以有g(global-在整個字元串中搜索)、i(ignore-忽略大小寫)、m( ...
  • 本文繼續接著上文,繼續寫下webpack.config.js的其他配置用法. 一、把兩個文件打包成一個,entry怎麼配置? 在上文中的webpack.dev.config.js中,用數組配置entry webpack.dev.config.js文件代碼: 然後在src/js目錄下麵新建一個calc ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...