css3-9 css中的浮动怎么使用
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 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 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 </style> 24 </head> 25 <body> 26 <div class="row"> 27 <div class="img"> 28 <img src="logo.png" alt=""> 29 </div> 30 <div class="img"> 31 <img src="logo.png" alt=""> 32 </div> 33 <div class="img"> 34 <img src="logo.png" alt=""> 35 </div> 36 <div class="img"> 37 <img src="logo.png" alt=""> 38 </div> 39 <div style='clear:both'></div> 40 </div> 41 42 <div class="row"> 43 <div class="img"> 44 <img src="logo.png" alt=""> 45 </div> 46 <div class="img"> 47 <img src="logo.png" alt=""> 48 </div> 49 <div class="img"> 50 <img src="logo.png" alt=""> 51 </div> 52 <div class="img"> 53 <img src="logo.png" alt=""> 54 </div> 55 <div style='clear:both'></div> 56 </div> 57 58 <div class="row"> 59 <div class="img"> 60 <img src="logo.png" alt=""> 61 </div> 62 <div class="img"> 63 <img src="logo.png" alt=""> 64 </div> 65 <div class="img"> 66 <img src="logo.png" alt=""> 67 </div> 68 <div class="img"> 69 <img src="logo.png" alt=""> 70 </div> 71 <div style='clear:both'></div> 72 </div> 73 </body> 74 </html>
