CSS學習之浮動的詳細介紹-html教學-PHP中文網

首頁

web前端

html教學

CSS學習之浮動的詳細介紹

零下一度

Jun 30, 2017 am 10:35 AM

css 浮動

從CSS學習筆記05 display屬性一文中，我們知道div是塊元素，會獨佔一行，即使div的寬度很小，像下面這樣

應用display屬性的inline屬性可以讓div與div共用一行，除了這個方法外，還有沒有其他方法可以實現這種效果呢，答案是肯定的，那就是下面要介紹的CSS的浮動特性，浮動從字面意思上來看，就是浮起來，動起來，那麼是誰浮起來，又是誰動起來呢？往下看，很快就會知道答案了。

元素的浮動是指設定了浮動屬性的元素會脫離標準文件流的控制，漂浮在標準流之上。元素浮動後，雖然脫離標準流，但還是會影響標準流的佈局。

在CSS中，透過float屬性來定義浮動，其基本語法格式如下：選擇器{float:屬性值;}，預設值為none（不浮動），另外用left表示左浮動，可以理解為漂浮起來後靠左排列，right表示右浮動，自然的就是靠右排列。

現在我們給div2設定浮動，看看會出現什麼效果

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>浮动</title> 6     <style type="text/css"> 7         .div1 {background-color: red; height: 50px; width: 400px;} 8         .div2 {background-color: blue; height: 100px; width: 100px; float: left;} 9         .div3 {background-color: gray; height: 150px; width: 400px;}10         .div4 {background-color: green; height: 30px; width: 600px;}11     </style>12 </head>13 <body>14     <div class="div1">div1</div>15     <div class="div2">div2</div>16     <div class="div3">这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3</div>17     <div class="div4">div4</div>18 </body>19 </html>

登入後複製

这时候div2的位置并没有变化，而div3向上移动了，与div2共用一行，相当于div2不占用页面的空间了，不过影响了div3中的文字布局。从这里也可以清楚的看出，是浮动的对象div2先漂浮起来，然后后面的对象div3会向它原来的位置动起来，这也解答了刚开始提出的问题。

浮动是将块元素独占一行的行为取消，将这个块从原来的文档流模式中，可以理解为它飘起来了，它原来的地方就空出来了，它的内容分离出来，这样它后面的对象就当它不存在了。

接下来给div3也设置一下浮动，会有什么意想不到的结果出现吗？

这时，由于div2与div3同时设置了浮动，所以都脱离了标准流，因此div4向上移动与div1组成了一个新的标准流，而浮动的元素是“浮”在标准流的元素之上的，所以div4被div2，div3挡住了一部分。

从上面的现象可以看出，给div3设置浮动之后，div3是紧接着跟在div2后面的，但是div2也是设置了浮动的，可是div2并没有跟在div1后面，这里可以得出一个结论：

浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐（也就是紧挨着上一个元素的后面），如果一行放不下，A元素则会被挤到下一行；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

假如把div4也设置成左浮动，效果如下

我们来一起分析一下，首先看div4，它的上一个元素div3设置了左浮动，所以div4的顶部与div3的顶部对齐，接着看div3，div3的上一个元素div2也设置了左浮动，所以div3的顶部与div2的顶部对其，现在看div2，div2的上一个元素是div1，但是div1并没有设置浮动属性，属于标准流，所以div2的顶部与div1的底部对齐。

或许有人会想如果要让div4独占一行，该怎么办？这就需要用到CSS的清除浮动，清除浮动的关键字是clear，它有如下几个值

再来看div2设置左浮动的现象

因为div3的上一个元素div2设置了左浮动，所以div3占据了元素div2的空间，因为div3的宽高比div2的宽高都大，所以div3被div2挡住了一部分，我们知道标准流中的元素都是没有设置浮动属性的，所以需要清除掉div2元素浮动给div3造成的影响，由于div2是左浮动，因此为div3清除左边的浮动

现象与原来没有设置浮动一样，好，现在div2与div3同时设置左浮动，我想应该可以比较容易的知道如何让div4独占一行了。

清除浮动其他属性值可以自行类推并测试出来。有了上面的基础，我们就可以做出以下比较常见的网页布局。

 1 <!DOCTYPE html> 2 
 <html lang="en"> 3 <head> 4     
 <meta charset="UTF-8"> 5     
 <title>常见布局</title> 6     
 <style type="text/css"> 7         
 .head {background-color: red; height: 50px; width: 500px;} 8         
 .sidebar {background-color: blue; height: 200px; width: 100px; float: left;} 9         
 .main {background-color: gray; height: 200px; width: 400px; float: left;}10         
 .foot {background-color: green; height: 30px; width: 500px; clear: left;}11     
 </style>12 </head>13 <body>14     <div class="head">head</div>15     
 <div class="sidebar">sidebar</div>16     
 <div class="main">main</div>17     
 <div class="foot">foot</div>18 </body>19 </html>

登入後複製

以上是CSS學習之浮動的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7871

Java教學

1649

CakePHP 教程

1407

Laravel 教程

1301

PHP教程

1245

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。