浮動屬性CSS

2021-08-21 15:35:17 字數 649 閱讀 1983

這是第1個盒子

這是第2個盒子

這是第3個盒子

這是乙個div1

這是乙個div2

這是乙個span1

這是乙個span2

浮動的盒子可以向左浮動,也可以向右浮動,直到它的外邊緣碰到包含框或另乙個浮動盒子為止。本網頁中共有三個,分別代表日用品、圖書和鞋子。這裡使用這三個和本段文本來演示講解浮動在網頁中的應用,根據需要所在的div分別向左浮動、向右浮動,或者不浮動。

div 

#father

.layer01

.layer02

.layer03

.layer04

/*04.after偽類防止父類邊框塌陷*/

.clear:after

/* 01.空div標籤

.clear*/

這是一張這是一張這是一張這是一張這是一張

這是一張這是一張這是一張這是一張這是一張

這是一張這是一張這是一張這是一張這是一張

css浮動屬性

1 為什麼需要浮動 html中的標籤元素大致分為三類 塊狀元素 內聯元素 內聯塊元素。每種元素都有其各自的特點,其中塊狀元素會獨佔一行,而內聯元素和內聯塊元素則會在一行內顯示。如果我們想讓兩個甚至多個塊狀元素在同一行顯示,這就需要用到css的浮動屬性。2 什麼是浮動 float 浮動 float 是...

css浮動屬性

浮動屬性使用非常多 一般為垂直排布的瀑布流,但是如果使用浮動主題就可以將垂直變為水平 如果一行的寬度不夠就會換行顯示 浮動主要為了脫離文件流 垂直排列 語法 選擇符 特點 1.div塊元素失去 塊狀 換行顯示特徵,變為行內元素 2.緊貼上乙個浮動元素 同方向 或父級元素的邊框,如寬度不夠將換行顯示 ...

CSS核心屬性 浮動屬性

float 定義網頁中其他文字如何環繞該元素 語法 說明 left 元素活動浮動在文字左面 right 元素浮動在右面 none 預設值,不浮動 特點 1.div塊元素失去 塊狀 換行顯示特徵,變為行內元素 2.緊貼上乙個浮動元素 同方向 或父級元素得邊框。如寬度不夠將換行顯示 3.佔據行內元素的空...