float一些效果

2021-08-17 21:01:55 字數 2328 閱讀 7998

浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。

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

文字的特點:不會鑽入到任何東西的下邊。(注:如果上層被設定position:absolute的div覆蓋,則被覆蓋的下一層div中則文字不會展示出來)

浮動就是個帶有方位的display:inline-block屬性

它脫離文件流,所以它不佔據空間。

請看下圖,當把框 1 向右浮動時,它脫離文件流並且向右移動,直到它的右邊緣碰到包含框的右邊緣:

再請看下圖,當框 1 向左浮動時,它脫離文件流並且向左移動,直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中,所以它不佔據空間,實際上覆蓋住了框 2,使框 2 從檢視中消失。

如果把所有三個框都向左移動,那麼框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前乙個浮動框。

如下圖所示,如果包含框太窄,無法容納水平排列的三個浮動元素,那麼其它浮動塊向下移動,直到有足夠的空間。如果浮動元素的高度不同,那麼當它們向下移動時可能被其它浮動元素「卡住」:

1.父級float(或者父級absolute),子級float

效果:父級的文字依舊會顯示出來。

2.並列div同時,第乙個設定position:absolute ,另乙個設定float:left

position:absolute始終會覆蓋float:left(包括下邊的文字一樣被覆蓋),也就是說position:absolute層級要高於float:left的層級:

3.並列div同時,第乙個什麼也不設定在正常的文件流中(和position:relative是乙個效果) ,另乙個設定float:left

另乙個碰到包含框停止,效果圖:

注:float沒有top/left/right/bottom屬性。元素不可以同時使用float和position屬性。

float  特點:可以設定寬高。元素元素之間沒有間隙。浮動元素依舊遵循盒模型概念。共享一行,一行放不下自動換行。

float屬性 1.不會無視流動元素(在文件流中的元素)和浮動元素

2.流動元素(在文件流中的元素)無視浮動元素

3.文件流中的元素不會忽略float元素中的文字

position屬性:

值:relative,absolute,static(預設),fixed

注:position:absolute脫離文件流,無視任何元素。會漂浮於任何元素上方。

z-index屬性:任意整數,數字越大,層級越高(越靠螢幕前頭)。僅在定位元素上有效(position:xx)

1.如果兩個元素z-index相同,哪個元素靠後,誰的層級就越大。12

若1,2的z-index相同,2層級高於1

2. 兩個元素的子元素層級關係,主要由父元素決定。

111222

.div1的z-index:1000

div1-1的z-index:100

.div2的z-index:100 

.div2-1的z-index:1000

div1的層級高於div2,不管div2中子級 div層級有多高。依舊沒用。div1依舊飄浮於 div2之上,包括對應的子元素

關於float的一些理解

float是否脫離文件流,乙個父元素不設定overflow的話,子元素float,就不會把父元素撐開,換句話說,他就不會有高度,但是做個demo 父元素overflow hidden 子元素前兩個float,第三個不float,結果是第三個沒有clear浮動的元素,跟float的元素出現在同乙個位置...

float浮動的一些感想。

float left right none inherit 文件流是文件中可顯示物件在排列時所占用的位置。浮動的定義 使元素脫離文件流,按照指定方向發生移動,遇到父級邊界或者相鄰的浮動元素停了下來。clear left right both none inherit 元素的某個方向上不能有浮動元素 ...

css一些基礎效果

1.旋轉 center bj div1 ul li img1 hover 旋轉 center bj div1 ul li img2 hover y軸旋轉 center bj div1 ul li img3 hover 2.縮放 center bj div2 d2 ul li div 父元素設定溢位隱...