css的浮動屬性

2021-10-03 03:41:20 字數 968 閱讀 6109

div在html5中屬於塊狀元素,在頁面顯示中是獨佔一行的,預設上下排序,也就是標準文件流,如圖所示:

但是在頁面布局時為想要的效果,會要求在一行內有多個塊狀元素並列顯示。

這個是後就要用到css中的浮動屬性:float

浮動屬性有三個屬性值:

float:left 元素向左浮動

float:right 元素向右浮動

float:none 元素不浮動(預設值)

浮動的目的就是讓多個塊狀元素併排顯示,且給元素設定的浮動時,在同一行的塊狀元素要都給它設定浮動,否則就會出現重合或遮蓋的效果,如圖所示

逆戰由此可以得出浮動了的元素脫離標準文件流會把它本來的位置讓出來給他下乙個元素。

也就是讓元素脫離標準文件流,漂浮在標準文件流之上。

浮動的元素的規律是:浮動元素在沒有margin和padding的情況下會乙個緊挨乙個橫向排列,當這一行放不下這兩個元素是那麼後面這個元素2會被前面元素1給擠下去。

浮動也可以用來實現文字環繞的效果如圖所示:

浮動還可以修復關於ie瀏覽器三畫素的bug

浮動的顯示規則:浮動物件會像左或者右移動直到遇到邊框(border)、填充值(padding)、外邊界(margin)或者另乙個塊元素為止。

有三種情況float:不生效

1)當寬+寬大於父級元素的寬時;

2)只給乙個元素加了float時;

3)單詞寫錯

浮動屬性CSS

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

css浮動屬性

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

css浮動屬性

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