XML DOM 獲取節點值
713
2025-04-05
CSS浮動
CSS浮動
浮動的特性
float屬性
三個div都不浮動
第一個div浮動
第二個div浮動
三個div都浮動
浮動的父子關系
浮動影響父層盒子高度
overflow屬性
溢出處理
清除浮動
浮動的特性
1.浮動主要用于使得div脫離標準文檔流，生成多列布局
2.浮動就是讓元素可以向左或向右移動，直到它的外邊距碰到其父級的內邊距或者是上一個元素的外邊距(這里指的上一個元素不管它有沒有設置浮動，都會緊挨著上一個元素）
3.浮動元素支持所有的css樣式 、內容撐開寬高 、多個元素設置浮動，寬度足夠的話，會排在一行 、脫離文檔流 、提升層級半級（也就是說：一個元素設置了浮動屬性后，下一個元素就會無視這個元素的存在，但是下一個元素中的文本內容依然會為這個元素讓出位置使自身的文本內容環繞在設置浮動元素的周圍）。
注意：不管是行級還是塊級元素，如果設置了浮動屬性，該元素就變成了具有inline-block屬性的元素。
float屬性
下面我們用三個div來設置不同情況的div浮動來通過例子來理解float以及overflow。
三個div都不浮動
樣例代碼：
我是塊級元素1，沒有設置浮動
我是塊級元素2，沒有設置浮動
我是塊級元素3，沒有設置浮動
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
效果截圖：
在不設置浮動的情況下，三個div塊會豎著在一列顯示
第一個div浮動
樣例代碼：
塊級元素1，設置浮動
塊級元素2，沒有設置浮動，塊級元素2，沒有設置浮動，塊級元素2，沒有設置浮動，塊級元素2，沒有設置浮動
塊級元素3，沒有設置浮動
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
效果截圖：
故意將第二個div塊中的內容寫得多點，我們可以得出下面的結論：
1.沒有設置浮動的元素會填充浮動元素留下來的空間
2.浮動元素會和非浮動元素發生重疊，浮動元素會在圖層的最上面
3.使用浮動時，該元素會脫離文檔流，后面的元素會無視這個元素，但文本依然會為這個浮動元素讓出位置，并且元素中的文字內容會環繞在其周圍。
第二個div浮動
樣例代碼：
塊級元素1，沒有設置浮動
塊級元素2，設置浮動
塊級元素3，沒有設置浮動
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
效果截圖：
由此我們可以很明顯的看出：
浮動元素不會超越其前面的元素
三個div都浮動
樣例代碼：
塊級元素1，設置浮動
塊級元素2，設置浮動
塊級元素3，設置浮動
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
效果截圖：
瀏覽器寬度足夠時，三個div會并排排列 。
當我們發大頁面時，瀏覽器寬度不足以容納最后一個div時，最后一個div掉下來，并且頂部不會超過倒數第二個div的底部。
浮動的父子關系
樣例代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
效果截圖：
由此我們可以得到下面的結論：
1.浮動元素不會在其浮動方向上溢出父級的包含塊 也就是說元素左浮動，其左外邊距不會超過父級的左內邊距，元素右浮動，其右外邊距不會超過父級的右內邊距 。
2.浮動元素的位置受到同級同向浮動元素的影響 也就是說同一父級中有多個浮動元素，后一個元素的位置會受到前一個浮動元素位置的影響，他們不會相互遮擋，后一個浮動元素會緊挨著前一個浮動元素的左外邊距進行定位，如果當前空間不足，則會換行，否則會放置在前一個浮動元素的下面。
浮動影響父層盒子高度
樣例代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
效果截圖：
由此我們可以得到下面的結論：
父元素的高度靠子元素撐開，子元素全部浮動后，均脫離文檔流，父元素高度塌陷。
overflow屬性
overflow屬性的妙用：
配合著浮動父容器，解決父容器高度他塌陷的問題。
使用overflow擴展盒子高度，overflow屬性會觸發瀏覽器重新計算父元素盒子高度。
樣例代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
效果截圖：
溢出處理
樣例代碼：
222222
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
效果截圖：
當d2的寬度超過了父級d1的寬度時，我們可以通過設置不同的overflow屬性值來實現不同的解決辦法，我所演示的是瀏覽器會顯示滾動條以便查看其余內容。
清除浮動
樣例代碼：
我是塊級元素1
我是塊級元素2
我是塊級元素3
牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
沒有清除兩側浮動效果截圖：
把代碼中的這段代碼的注釋去掉，來清除兩側浮動
/* .clear{ clear: both; } */
1
2
3
清除兩側浮動效果截圖：
可以很明顯的看出：
清除兩側浮動后，有擴展父級盒子高度的作用
寫作不易，讀完如果對你有幫助，感謝支持！
如果你是電腦端，看見右下角的“
一鍵三連
”了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
CSS HTML 容器
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
