css浮動屬性

2021-10-03 03:43:24 字數 1654 閱讀 7119

1、為什麼需要浮動

html中的標籤元素大致分為三類:塊狀元素、內聯元素、內聯塊元素。

每種元素都有其各自的特點,其中塊狀元素會獨佔一行,而內聯元素和內聯塊元素則會在一行內顯示。如果我們想讓兩個甚至多個塊狀元素在同一行顯示,這就需要用到css的浮動屬性。

2、什麼是浮動(float)

浮動(float)是css樣式中的乙個屬性,主要用來對html頁面元素進行布局。

設定浮動屬性後的標籤可以向左向右移動,直至碰到另乙個浮動元素或者它的父元素邊界。

3、屬性以及用法

屬性值作用

none

元素不浮動,按預設位置顯示

left

元素向左浮動

right

元素向右浮動

inherit

繼承父元素浮動屬性

在乙個盒子裡放置三個p標籤並設定它的寬度和高度,給它們乙個背景色

多元素同行顯示

如果我們想讓p1 和p2在同一行靠左顯示,其中一種方法就是給p1和p2 都設定float屬性

這時p1和p2實現了在同一行靠左顯示,但是p3卻向上跑到了p1和p2的下面。

我們可以發現float屬性的乙個特點:當乙個標籤使用float屬性進行浮動時,會跑到上層顯示,後面緊跟的標籤會按照預設樣式無視浮動標籤在原層面進行排列。

實現文字環繞效果

在網頁中插入一張並寫一段話,並簡單設定樣式

為新增乙個 浮動屬性讓其向右浮動

從圖中我們可以看到浮動,雖然遮擋住了p標籤,但是並沒有遮擋住文字,文字會將浮動的標籤環繞包圍,出現文字環繞的效果。

4、如何清除浮動對下方標籤的影響:clear屬性

給被影響的標籤設定clear屬性,指定標籤的左側或右側不允許存在浮動的元素。
屬性值

作用left

左側不允許浮動

right

右側不允許浮動

both

兩側都不允許浮動

inherit

繼承父元素的clear屬性

none

預設值,按預設位置顯示

設定左浮動之後,如果不想影響下方標籤的位置顯示, 就為其新增clear屬性

img

p

去除浮動影響後標籤按預設樣式顯示

(千峰逆戰學習小結(恰飯))

浮動屬性CSS

這是第1個盒子 這是第2個盒子 這是第3個盒子 這是乙個div1 這是乙個div2 這是乙個span1 這是乙個span2 浮動的盒子可以向左浮動,也可以向右浮動,直到它的外邊緣碰到包含框或另乙個浮動盒子為止。本網頁中共有三個,分別代表日用品 圖書和鞋子。這裡使用這三個和本段文本來演示講解浮動在網頁...

css浮動屬性

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

CSS核心屬性 浮動屬性

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