CSS应用float特性设定波动元素的案例实例教程

日期：2021-03-03 类型：科技新闻 

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

波动的框能够向左或向右挪动，直至它的外边沿碰到包括框或另外一个波动框的边框为止。
因为波动框不在文本文档的一般流中，因此文本文档的一般流中的块主要表现得就像波动框不存在1样。

float实际效果展现
基础设定

在网页页面中一切正常加上3个div色块:

HTML编码:

XML/HTML Code拷贝內容到剪贴板
  1. <div class="div1">  
  2.     div1   
  3. </div>  
  4. <div class="div2">  
  5.     div2   
  6. </div>  
  7. <div class="div3">  
  8.     div3   
  9. </div>  

简易设定1些尺寸和色调：

CSS编码:

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width: 100px;   
  3.     height: 100px;   
  4.     background-color: cyan;   
  5. }   
  6. .div2 {   
  7.     width: 100px;   
  8.     height: 100px;   
  9.     background-color: skyblue;   
  10. }   
  11. .div3 {   
  12.     width: 100px;   
  13.     height: 100px;   
  14.     background-color: green;   
  15. }  

实际效果以下：

一切正常状况下，3个div从上至下先后排列

下面，大家来应用下float特性，并设定值right

给div1标识加上float特性

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width: 100px;   
  3.     height: 100px;   
  4.     background-color: cyan;   
  5.     float: rightright;   
  6. }  

实际效果以下：

大家会发现，div1跑到了显示屏的右边，这便是让它波动到右边的主要表现。

另外给3个div都设定float: left

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width: 100px;   
  3.     height: 100px;   
  4.     background-color: cyan;   
  5.     float: left;   
  6. }   
  7. .div2 {   
  8.     width: 100px;   
  9.     height: 100px;   
  10.     background-color: skyblue;   
  11.     float: left;   
  12. }   
  13. .div3 {   
  14.     width: 100px;   
  15.     height: 100px;   
  16.     background-color: green;   
  17.     float: left;   
  18. }  

实际效果以下：

当大家把3个div都设定了向左波动以后，便可以完成这类横排合理布局

改动CSS编码（div1的高宽比和div2的宽度），以下：

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width: 100px;   
  3.     height: 130px;   
  4.     background-color: cyan;   
  5.     float: left;   
  6. }   
  7. .div2 {   
  8.     width: 300px;   
  9.     height: 100px;   
  10.     background-color: skyblue;   
  11.     float: left;   
  12. }   
  13. .div3 {   
  14.     width: 100px;   
  15.     height: 100px;   
  16.     background-color: green;   
  17.     float: left;   
  18. }  

实际效果展现：

大家会发现，当div2充足宽，1行内放不下div3的情况下，div3会全自动从第2行刚开始合理布局。可是又因为div1的高宽比多了1些，因此div3会从div1的后边排布，而不容易从头开始刚开始


应用 overflow 消除波动
样例：

CSS Code拷贝內容到剪贴板
  1. .overflow-clear-float {overflow:hidden;}  

或

CSS Code拷贝內容到剪贴板
  1. .overflow-clear-float {overflow:auto;}  

overflow 款式值为 非 visilbe 时，具体上是建立了 CSS 2.1 标准界定的 Block Formatting Contexts。建立了它的元素，会再次测算其內部元素部位，从而得到准确高宽比。这样父器皿也就包括了波动元素高宽比。这个名词过度晦涩难懂，在 CSS 3 草案中被变动为名词 Root Flow，说白了，是建立了1个新的根合理布局流，这个合理布局流是单独的，不危害其外界元素的。具体上，这个特点与 初期 IE 的 hasLayout 特点10分类似。
留意适配难题：
Block Formatting Contexts 定义是在 CSS 2.1 标准内被提出。因而 IE6/7 中其实不被适用，这是因为以前的 IE 版本号仅彻底完成了 CSS 1 标准规范，和1一部分 CSS 2.0 标准。在 IE 7 中，overflow 值为非 visible 时，能够开启 hasLayout 特点。这一样使得 IE 7 一样可使器皿包括波动元素。

上一篇：用CSS3的box 返回下一篇：没有了