妙味雲課堂之css 浮動與清浮動

2021-06-21 07:42:30 字數 1369 閱讀 6126

一. 關於display:inline-block

inline-block的特性:

1、使塊在一行顯示;

2、行內屬性標籤支援寬和高;

3、沒有寬度的時候,寬度由內容撐開;

※※  

使用它會出現以下問題  ※※

1、**換行會被解析(br);

2、ie6、ie7 不支援塊屬性標籤的inline-block;

有什麼辦法可以解決以上問題???答案是使用浮動。 

二. 浮動的原理

元素加了浮動,會脫離文件流 ,按照指定的乙個方向移動直到碰到父級的邊界或者另外乙個浮動元素停止。

小貼士:文件流是文件中可顯示物件在排列時所占用的位置。

設定浮動後,元素具有以下特性:

1、使塊元素在一行顯示;

2、使內嵌元素支援寬高;

3、不設定寬度的時候寬度由內容撐開;

4、脫離文件流;

float : left / right / none

三. 清浮動

為什麼要清浮動?

因為浮動會對父元素和後面的元素有影響,當前面的元素設定為浮動後,它就脫離了文件流,後面的元素就會往上頂。

清浮動就是去除前面元素浮動對後面元素以及父元素的影響。

當父元素沒有指定高度而它的子元素有浮動,這時這個父元素的高度不會自動增加(自適應)。

clear : left / right / both / none

清浮動的方法:

1、給父級也加浮動

問題:頁面中所有父級都要加浮動。

2、給父級加display:inline-block

問題:margin左右居中失效

3、在浮動元素下加

問題:ie6 最小高度19px;(解決後ie6下還有2px偏差)

4、在浮動元素下加

==  clear:both

問題:不符合工作中結構、樣式、行為三者分離的要求。 

5、給浮動元素的父級加

:after

**在ie6,7下浮動元素的父級有寬度就不用清浮動**

6、父級加絕對定位

7、父級加固定定位

妙味雲課堂之css 浮動與清浮動

一.關於display inline block inline block的特性 1 使塊在一行顯示 2 行內屬性標籤支援寬和高 3 沒有寬度的時候,寬度由內容撐開 使用它會出現以下問題 1 換行會被解析 br 2 ie6 ie7 不支援塊屬性標籤的inline block 有什麼辦法可以解決以上問...

妙味雲課堂之css 定位與層級

一.相對定位position relative 以自身為基準點進行定位。a 不影響元素本身的特性 b 不使元素脫離文件流 c 如果沒有定位偏移量,對元素本身沒有任何影響 二.絕對定位position absolute a 使元素完全脫離文件流 b 使內嵌標籤支援寬高 c 塊屬性標籤內容撐開寬度 d ...

css之浮動與定位

文件布局中,常常用到浮動與定位。一 浮動 浮動使塊級元素從正常文件流中刪除,向左或向右浮動。但是其他元素會環繞該元素,因此仍然會影響布局。浮動元 素相對與包含塊的內邊界 內容區 進行浮動。浮動可以用於使塊級元素排成一列,也可以形成兩列或三列布局。注意問題 浮動元素時,可能會出現父元素容器塌陷的問題。...