P41-前端基礎-clear解決受浮動元素的影響而改變位置
P41-前端基礎-clear解決浮動元素的影響而改變位置
1.概述
問題描述
使用塊元素設計頁面布局，當A塊元素設置浮動后，離開了文檔流。相鄰的塊元素B受浮動的影響會改變原有的位置，移動到A元素位置。
解決方案
clear就是用來解決某個元素因為其他元素浮動的影響而改變位置，可以通過clear屬性來清除浮動元素對當前元素所產生的影響
2.clear介紹
clear
作用：清除浮動元素對當前元素所產生的影響
可選值：
left 清除左側浮動元素對當前元素的影響
right 清除右側浮動元素對當前元素的影響
both 清除兩側中最大影響的那側
原理：
設置清除浮動以后，瀏覽器會自動為元素添加一個上外邊距，以使其位置不受其他元素的影響
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
3.clear效果預覽
3.1.塊3沒有設置clear效果
3.2.塊3設置clear效果
web前端
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
