浮動:顧名思義先浮後動,浮動的物件會先漂浮起來,離開自己原來的位置(也就是所謂的脫離文件流),後動的意思是,它的後面的元素會向它原來的位置動起來。
1.當元素有浮動屬性時,會對其父元素或後面的元素產生影響,會出現乙個布局錯亂的現象。(我們可以通過清除浮動的方式進行解決這個問題)
2.當父元素沒有指定高度並且子元素有浮動時,這個父元素的高度不會自動增加。
3.清除浮動:就是可以去掉前面物件的浮動對後面物件的印象,是加給未浮動元素的。
語法:clear:
none(
預設值,允許兩邊都可以有浮動
) both(
左右兩側都不允許有浮動
) left(
左側不允許有浮動
) right(
右側不允許有浮動
)。清除浮動方法總結:
[1].額外標籤法:w3c建議在父元素的末尾增加乙個css為」clear:both」的元素,強迫容器適應它的高度以便裝下所有浮動的元素。(缺點是會增加**)。
[2].父元素使用overflow的方法:通過設定父元素的overflow的屬性為hidden,是最簡單的清除浮動的方法,但是如果子元素使用定位布局,將很難實現。
[3].利用偽物件after方法:定義乙個類,使用偽對
象after
控制浮動元素的影響,網上最流行的清除浮動的**:
.clearfix (.clearfix解決ie6/7相容性問題)。
4.另外一種解決浮動布局錯亂問題的方式:給浮動元素的父元素加寬度。
三、使用方式
我們可以直接定義好浮動的css,然後應用給指定的需要浮動的元素就好了,方式非常簡單易用。比如:
1執行效果如下:doctype html
>
2<
html
>
3<
head
>
4<
title
>浮動測試
title
>
5<
style
type
="text/css"
>
6.right
7.left
8style
>
9head
>
10<
body
>
11<
div
class
="right"
>
div>
12<
div
class
="left"
>
div>
13body
>
14html
>
帶你熟悉CSS浮動
一 概念理解 浮動 顧名思義先浮後動,浮動的物件會先漂浮起來,離開自己原來的位置 也就是所謂的脫離文件流 後動的意思是,它的後面的元素會向它原來的位置動起來。二 注意事項 1.當元素有浮動屬性時,會對其父元素或後面的元素產生影響,會出現乙個布局錯亂的現象。我們可以通過清除浮動的方式進行解決這個問題 ...
帶你熟悉CSS浮動
一 概念理解 浮動 顧名思義先浮後動,浮動的物件會先漂浮起來,離開自己原來的位置 也就是所謂的脫離文件流 後動的意思是,它的後面的元素會向它原來的位置動起來。二 注意事項 1.當元素有浮動屬性時,會對其父元素或後面的元素產生影響,會出現乙個布局錯亂的現象。我們可以通過清除浮動的方式進行解決這個問題 ...
CSS 從熟悉到更熟悉
最近學習了css,乙個從熟悉到更熟悉的過程,來說說其中的收穫.css,好像在哪兒見過你 層疊樣式表 英文全稱 cascading style sheets 是一種用來表現html 標準通用標記語言的乙個應用 或xml 標準通用標記語言的乙個子集 等檔案樣式的計算機語言.css不僅可以靜態地修飾網頁,...