css布局之浮動

2021-08-27 22:29:52 字數 1146 閱讀 7203

css布局中說到浮動,浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動

框的邊框為止。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

一float屬性的定義和用法

float屬性:設定元素浮動

可能的值:

none 不浮動,在文件流內,預設

left  左浮動,脫離文件流

right 右浮動,脫離文件流

inherit 規定應該從父元素繼承 float屬性的值。

(1)三個不浮動元素的圖示和效果:

(2)第乙個元素向右浮動的圖示和效果:

框a向右浮動分離文件流;框b佔據框a原來的位置.

(3)設定三個元素均向左浮動的圖示和效果:

如果包含框太窄,無法容納水平排列的三個浮動元素,那麼其它浮動塊向下移動,直到有足夠的空間.

二clear屬性

clear屬性規定元素的哪一側不允許其他浮動元素。

如果宣告為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元

素的下外邊距邊界之下。

可能的值

left  在左側不允許浮動元素。

right  在右側不允許浮動元素。

both  在左右兩側均不允許浮動元素。

none  預設值。允許浮動元素出現在兩側。

inherit 規定應該從父元素繼承 clear 屬性的值。

兩浮動和清除浮動的結合

CSS之浮動布局

1.什麼是浮動 在我們布局的時候用到的一種技術,能夠方便我們進行布局,通過讓元素浮動,我們可以使元素在水平上左右移動,再通過margin屬性調整位置。2.浮動的原理 使當前元素脫離普通流,相當於浮動起來一樣,浮動的框可以左右移動,直至它的外邊緣遇到包含框或者另乙個浮動的邊緣 3 浮動的生成 使用cs...

CSS布局之浮動 清除浮動

1.2 浮動 float 小結 1.3 浮動 float 的應用 重要 1.4 浮動 float 的擴充套件 2.清除浮動 2.4 清除浮動總結 概念 元素的浮動是指設定了浮動屬性的元素會 脫離標準普通流的控制 移動到指定位置。作用 讓多個盒子 div 水平排列成一行,使得浮動成為布局的重要手段。可...

CSS 布局機制之浮動

網頁布局的核心就是使用css來擺放盒子css 提供了3 種機制來設定盒子的擺放位置,分別是普通流 標準流 浮動和定位,其中 普通流 標準流 塊級元素會獨佔一行,從上向下順序排列 常用元素 div hr p h1 h6 ul ol dl form table 行內元素會按照順序,從左到右順序排列,碰到...