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