P41-前端基础-clear解决受浮动元素的影响而改变位置

P41-前端基础-clear解决浮动元素的影响而改变位置

1.概述

问题描述

使用块元素设计页面布局，当A块元素设置浮动后，离开了文档流。相邻的块元素B受浮动的影响会改变原有的位置，移动到A元素位置。

解决方案

clear就是用来解决某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响

2.clear介绍

clear

作用：清除浮动元素对当前元素所产生的影响

可选值：

left 清除左侧浮动元素对当前元素的影响

right 清除右侧浮动元素对当前元素的影响

both 清除两侧中最大影响的那侧

原理：

设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

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小时内删除侵权内容。