P36-前端基礎(chǔ)-浮動的簡介

P36-前端基礎(chǔ)-浮動的簡介

1.概述

塊元素在文檔流中默認(rèn)寬度是父元素的寬度，因此多個塊元素就是垂直排列。但是我們在開發(fā)項目時候，希望塊元素能夠按照我們的需求進(jìn)行橫向布局。

這個就是我們下面要講的浮動。

2.塊元素默認(rèn)布局方式

2.1.塊元素代碼

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

2.2.塊元素默認(rèn)布局樣式預(yù)覽

3.浮動入門介紹

通過浮動可以使一個元素向其父元素的左側(cè)或右側(cè)移動，使用 float 屬性來設(shè)置于元素的浮動

可選值：

none 默認(rèn)值 ，元素不浮動

left 元素向左浮動

right 元素向右浮動

注意，元素設(shè)置浮動以后，水平布局的等式便不需要強(qiáng)制成立

元素設(shè)置浮動以后，會完全從文檔流中脫離，不再占用文檔流的位置，

所以元素下邊的還在文檔流中的元素會自動向上移動

浮動的特點(diǎn)：

1、浮動元素會完全脫離文檔流，不再占據(jù)文檔流中的位置

2、設(shè)置浮動以后元素會向父元素的左側(cè)或右側(cè)移動，

3、浮動元素默認(rèn)不會從父元素中移出

4、浮動元素向左或向右移動時，不會超過它前邊的其他浮動元素

5、如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素?zé)o法上移

6、浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它一樣高

簡單總結(jié)：

浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列，

通過浮動可以制作一些水平方向的布局

3.1.浮動介紹案例代碼

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

63

64

65

66

67

3.2.浮動效果預(yù)覽

web前端

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。