zoukankan html css js c++ java

CSS学习笔记（1）--浮动

总结：浮动只能在脱离文档流的当前位置向上浮动，不能像定位一样到处乱跑。

清除浮动，设置一个类.clear{clear:both;}

1.没有浮动，都独占一行：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #div1{
 8             width:50px;
 9             height: 50px;
10             background: #f00;
11             /*float: left;*/
12         }
13         #div2{
14             width: 70px;
15             height: 70px;
16             background: #00f;
17             /*float: left;*/
18         }
19         #div3{
20             width: 100px;
21             height: 100px;
22             background: #0f0;
23             /*float: left;*/
24         }
25     </style>
26 </head>
27 <body>
28     <div id="div1"></div>
29     <div id="div2"></div>
30     <div id="div3"></div>
31 </body>
32 </html>

2.红色浮动，后两个顶上来：

 1 <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             float: left;
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             /*float: left;*/
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             /*float: left;*/
19         }
20     </style>

3.红色、蓝色浮动，绿色顶上来，红蓝在上面一层先后排列：

 1 <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             float: left;
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             /*float: left;*/
19         }
20     </style>

4.全部浮动，都在上面一层，先后排列：

 1     <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             float: left;
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             float: left;
19         }
20     </style>

5.只蓝色浮动，上面是红色独占一行，绿色的顶到蓝色原来的位置，蓝色到上一层：

 1     <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             /*float: left;*/
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             /*float: left;*/
19         }
20     </style>

6.蓝色和绿色浮动，都在第二列先后排布：

 1     <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             /*float: left;*/
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             float: left;
19         }
20     </style>

7.红蓝绿都浮动，绿色加一个“清除左侧”，意思是，不允许左侧有东西，就跑去下一行了（清除两侧效果一样，因为包含了左侧）：

 1     <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             float: left;
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             float: left;
19             clear: left;
20         }
21     </style>

查看全文

相关阅读:
初始化注解和销毁注解
 MySQL、SQLServer、Oracle 分组排序
 mybatis 中SQLServer 和 mysql 模糊查询不同点
 SpringBoot学习之logback.xml 配置指定包或类输出至单独的日志文件中
 类比 RocketMq 和淘宝消息服务：
SVN提交文件失败：系统找不到指定路径
 官网下载MySQL 并安装
 Java 变量参数传入方法，方法结束后传入的值
 03-类与对象课后作业（1）
02方法-课后动手动脑

原文地址：https://www.cnblogs.com/Jacklovely/p/6222813.html