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

时间：2023-03-10 07:46:00
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浮动和清除浮动

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

         }

         .img{

             background: #ccc;

             width:200px;

             height:200px;

             float:left;

             margin-left:100px;

         }

         .row{

             margin-bottom:10px;

         }

     </style>

 </head>

 <body>

     <div class="row">

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div style='clear:both'></div>

     </div>

     <div class="row">

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div style='clear:both'></div>

     </div>

     <div class="row">

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div style='clear:both'></div>

     </div>

 </body>

 </html>

相关文章