CSS操作DIV的float用法

Css樣式的float浮動屬性，用於設定標籤物件（如：

標籤盒子、標籤、標籤、標籤等html標籤）的浮動佈局，浮動也就是我們所說標籤物件浮動居左靠左（float:left）和浮動居右靠右(float:right)。

float是什麼意思？

float是浮動，翻譯成中文也是浮動意思。進入對應css手冊中float手冊以了解float基本資訊。

float的作用

透過css定義float（浮動）讓div樣式層塊，向左或向右（靠）浮動。

float浮動教程目錄

float語法

float應用程式與用法

float浮動案例

css浮動其他應用程式

css浮動總結

float語法

Float常跟屬性值left、right、none

Float:none 不使用浮動

#Float: left 靠左浮動

Float:right 靠右浮動

float語法： 

float : none | left |right

參數值： 

none : 　物件不浮動

left : 　物件浮在左邊

right : 　物件浮在右邊

接下來我們來透過一個div+css實例講解float使用技巧。

float應用程式與用法

Float浮動用於設定物件靠左與靠右浮動樣式，可以實現我們所需要的讓DIV、SPAN等標籤居左居右浮動。

簡單使用語法

div{float:left} /* css註解：設定div物件浮動靠左（left） */ 

div{float:right} / * css註解：設定div物件浮動靠右(right) */ 

css float浮動案例

我們設定一個盒子裡，一個靠右、一個靠左浮動2個盒子，為了直觀看到css浮動佈局效果，我們對兩個盒子設定一定寬度、高度和邊框。

1、主要的html程式碼片段：

 

   

佈局靠左浮動

 

   

佈局靠右浮動

 

#   

< /div> 

 

2、css程式碼片段：

.div { width:400px;padding:10px;border:1px solid #F00} 

.div _left{ float:left;width:150px;border:1px solid #00F;height:50px} #.div _right{ float:right;width:150px;border:1px solid #00F;height:50px} 

.clear{ clear:both} 

CSS操作DIV的float用法就這麼多，需要的朋友可以保存一下，也請大家持續關注本站的其他更新。

相關閱讀：

CSS的min-width和max-width怎麼設定

## CSS的margin有什麼作用

CSS3怎麼做出圓角

#

以上是CSS操作DIV的float用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

css float

來源：php.cn

上一篇：html的錨文本怎麼寫 下一篇：怎樣用CSS操作div的z-index

本網站聲明

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

作者最新文章

• 最新php程式設計師工具箱 v1.0版本介紹
  2018-06-11 11:57:34
• vue.js路由失效如何處理
  2018-06-15 15:55:18
• 怎樣使用js解析資料庫（附程式碼）
  2018-06-15 15:49:00
• 如何在專案中使用js綁定DOM事件
  2018-06-15 15:46:15
• 怎樣操作JS字串與特殊字符
  2018-06-15 15:42:38
• 如何在專案中使用jQuery內each方法
  2018-06-15 15:40:34
• 如何利用jquery做出文件上傳加載
  2018-06-15 15:39:32
• 怎樣對JS原型與原型鏈進行使用
  2018-06-15 15:37:14
• Angular CLI+Angular 5實戰專案演示
  2018-06-15 15:34:21
• 使用jQuery替換節點元素（附程式碼）
  2018-06-15 15:22:51

最新問題

function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...

來自於 2024-04-29 11:01:01

0

2

1638

google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？

來自於 2024-04-23 00:22:19

0

10

1794

子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應

來自於 2024-04-19 15:37:47

0

1

1530

父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...

來自於 2024-04-18 23:52:34

0

1

1439

關於CSS心智圖的課件在哪？ 課件

來自於 2024-04-16 10:10:18

0

0

1486

相關專題

更多>

• css
• css居中
• css如何插入圖片
• css超出顯示...
• css字體顏色
• 什麼是css
• css三角形怎麼寫
• css設定文字顏色