CSS浮动

CSS浮动

浮动的特性

float属性

三个div都不浮动

第一个div浮动

第二个div浮动

三个div都浮动

浮动的父子关系

浮动影响父层盒子高度

overflow属性

溢出处理

清除浮动

浮动的特性

1.浮动主要用于使得div脱离标准文档流，生成多列布局

2.浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）

3.浮动元素支持所有的css样式 、内容撑开宽高 、多个元素设置浮动，宽度足够的话，会排在一行 、脱离文档流 、提升层级半级（也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围）。

注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素。

float属性

下面我们用三个div来设置不同情况的div浮动来通过例子来理解float以及overflow。

三个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

效果截图：

在不设置浮动的情况下，三个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

效果截图：

故意将第二个div块中的内容写得多点，我们可以得出下面的结论：

1.没有设置浮动的元素会填充浮动元素留下来的空间

2.浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面

3.使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围。

第二个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

效果截图：

由此我们可以很明显的看出：

浮动元素不会超越其前面的元素

三个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

效果截图：

浏览器宽度足够时，三个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

效果截图：

溢出处理

样例代码：

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

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