css3-9 css中的浮动怎么使用

一、总结

一句话总结：用来做一般的行效果，比如说手机左右分布的头部导航栏。浮动的东西放到一个div中去，里面的内容根据需求左浮动或者右浮动，然后记得加上清除浮动。然后这整个div就是一个整体了。

1、clear both的最常用的作用是什么？

撑开盒子

因为div中的元素如果都浮动的话，盒子会缩回去，也就是宽变成0，clear both 防止盒子缩回去。

2、浮动和定位的联系和区别是什么？

都脱离文档流

定位可以满世界乱跑，浮动只能在原先文档流行的左边和右边浮起来。

浮动：你之前在文档流的哪个位置，你浮动之后还在文档流的哪个位置，只不过是左边还是右边。

3、clear left的通俗意思是什么？

我的左边不能有人，有人的话，我宁可去第二行

4、浮动的一般用法是什么(应用场景和使用方法)？

用来做一般的行效果，比如说手机左右分布的头部导航栏。

浮动的东西放到一个div中去，里面的内容根据需求左浮动或者右浮动，然后记得加上清除浮动。然后这整个div就是一个整体了。

5、多个浮动的块标签为什么可以放在一行？

浮动可以脱离文档流，块标签脱离文档流就失去了独占一行的特点。

浮动用于块标签，让快标签的独占一行的功能消失

二、css中的浮动怎么使用

1、相关知识

清除浮动:

1.clear:left

#浮动之后左侧不能有人

2.clear:right

#浮动之后右侧不能有人

3.clear:both

#浮动之后左右都不能有人

#可以有效的防止盒子回缩

2、代码

float浮动和清除浮动

1

2

3

4

5

index

6

7 *{

8 font-family:微软雅黑;

9 margin:0px;

10 }

11

12 .img{

13 background:#ccc;

14 width:200px;

15 height:200px;

16 float:left;

17 margin-left:100px;

18 }

19

20 .row{

21 margin-bottom:10px;

22 }

23

24

25

26

27

28

29