文档章节

HTML中float属性与clear属性的理解

 小郭偷宝
发布于 2016/11/27 14:49
字数 2133
阅读 205
收藏 0

   技术很多时候表面上看都是各自分家的,但是实际并非如此,就像滚雪球,时间越长半径越大,接触面积越大。当雪球足够大时,这时候就发现原来技术原来是不分家的,各个领域是相同的,只不过是你的接触面太小了,看不到你想看到的东西。我之前是做javaweb的,曾以为转向做c++之后就再也不会接触javaweb相关的东西,但是前一段时间的出差看了人家用的技术之后才真正意识到C++在UI方面的落后,所以萌生了很大使用HTML或HTML5结合C++来满足当前C++在UI方面的不足,所以我又回到了原点,虽然对Javaweb已经不如当初,但之前的工作经历还历历在目,所以学习起来不是很困难,感觉不累,也觉得凭一个月时间应该能将HTML、CSS、JS等前端技术恢复并超越。对各位分享我的经历的同时一方面是感慨C++在UI方面的不足(即使有了duilib开源库,但是里面动态效果远不如js),另一方面就是说明HTML的强大,希望各位能从我的经历中汲取教训,更好的将HTML学好,应用到C++领域(这里使用的就是自定义浏览器内核的使用,见我之前的几篇文章)。

    根据我之前的经验,HTML学习最重要的就是关于它的布局以及影响它布局的关键元素。其中包括绝对布局、相对布局、float属性、clear属性等。这里我讲的就是关于float属性的作用以及对文档布局的影响。(float属性是相对其父亲元素的,而绝对定位相对于全局文档)

    页面布局方式,主要包含:文档流、浮动层、float属性。HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块级元素换行。所谓的浮动层就是给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。

    float的值为left 则元素向左浮动,为 right 则元素向右浮动,为none则为默认值、为 inherit 则从父元素继承float属性,在讲解之前我们提供如下示例,看对各个元素添加float之后的什么样的?

html源码如下:

 

[html] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <link rel="stylesheet" href="float.css" />  
  5.     </head>  
  6.     <body>  
  7.         <div id="div1"> block 1</div>  
  8.         <div id="div2"> block 2</div>  
  9.         <div id="div3"> block 3</div>  
  10.         <input type="text" value="text1"  />  
  11.         <input type="text" value="text2" />  
  12.         <input type="text" value="text3 " />  
  13.         <div id="div4"> block 4</div>  
  14.         <input type="text" value="text4 " />  
  15.     </body>  
  16. </html>  


html对应的css源码如下:

 

 

[css] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. #div1  
  2.  {  
  3.     background-color:#00f;  
  4.     height:50px;  
  5.     width:100px;  
  6. }  
  7.   
  8. #div2  
  9. {  
  10.     background-color:Yellow;      
  11.     height:50px;  
  12.     width:200px;  
  13. }  
  14.   
  15. #div3  
  16. {  
  17.     background-color:#0f0;     
  18.     height:50px;  
  19.     width:300px;  
  20. }  
  21.   
  22. #div4  
  23. {  
  24.     background-color:#f00;  
  25.     height:50px;  
  26.     width:400px;  
  27. }  

 

 

    在我们没有添加任何float属性的情况下,浏览器显示效果:

    因为block1、block2、block3、block4为块级元素,所以自动换行,text1,text2,text3和text4位内联元素,故而一行显示;

(1)我们为block2添加float为left属性,这里这么测试就是测试当前元素为block元素后面为块级元素的情况下,显示

         效果有什么变化;

 

[css] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. <span style="font-size:14px;">#div2  
  2. {  
  3.     background-color:Yellow;      
  4.     height:50px;  
  5.     width:200px;  
  6.     float:left;  
  7. }</span>  

         效果如下:

 

         

         我们会发现,block2后面的block3直接抢占了block2原有的位置(被脱离文档流留下来的位置),且float为left的

         block2的元素覆盖了block3,也就是带float的元素在文档流元素之上。

(2)我们为block3添加float为left属性,因为block2后面为内联元素,看看现实效果如何变化

         浏览器足够宽情况:

         

         浏览器宽度不够长并逐渐缩小过程:

         

          

          

         可以看到,当blcok元素后面为内联元素,block设置float为left之后,内联元素并不像其后也为block一样,占了

         它脱离文档流留下的空白,而是跟在了设置float为left的block元素之后,内联之后的blcok也跟着排列而忽略该

         设置了float的block(有重叠而且和(1)测试相同);

(3)我们为text2添加float为left属性,这里这么测试就是测试当前元素为内联元素后为内联元素的情况下,显示效果

         有什么变化;

         

         如何text2内联元素设置了float为left(<input type="text" value="text3 " />),后续的内联元素和前面都一样,不

         论前面设置的float属性为left的元素是块级元素还是非块级元素,都跟在了其后一次排列,而不是占有留下的空

         白位置。

(4)我们为text2添加float为left属性,并且将后第3个也就是block4添加float为left属性,这时候显示效果如何?

         当浏览器足够长时:

         当浏览器不够长时:

             

         

         
 

         综上得出以下结论:

 

               当前元素分类(float:left)    下一个紧邻元素分类(不含float)                                            结论
                      块级元素(a)                     块级元素(b)                   b会填充a遗留下来的空间,a会和b发生重叠,a的图层在上面。
                   内联元素(b)                   b会紧跟在a的后面。并根据自身内联元素的特点,是否换行。
                      内联元素(a)                    块级元素(b)                   b不会跟随a的移动。
                   内联元素(b)                   b会紧跟在a的后面。并根据自身内联元素的特点,是否换行。

           从后者的角度看问题就简单了:如果前一个元素设置了float属性为left,如果我是内联元素,我就跟在其后,如

         果宽度不够我就换行到下一行;如果我是块级元素,我就不会跟在其后,直接抢占前一元素留下来的空白。

 

         同样的,对应float属性如果设置为right,对于以下几种情况:

(1)block2设置float为right属性,显示效果如下

         

         block2设置为右浮动后,脱离文档流,blcok3占据了block空白(从左到右从上到下默认排列到这个位置),如

         果不够长,blcok3和block2会重叠,block2会在blcok3的上方。

(2)将block2和text2以及block4同时设置float为right值

         浏览器够长的时候:

              由于text1-3为内联元素,在block4前没有换行的可能且脱离文档流,所以与text1-4与text2同行,且block4后与text2设置float为right,所以blcok4在text2的左边;

         浏览器不够长时:

               

               text2的左边放不下block4,blcok4只能换行到下一行并向右靠齐,text1-3在上面两个元素留下的空白元素从左到有排列,不够才下一行(且内联与float为right元素不重

               叠,如果与float属性元素在一行而且长度不够那么内联的就自己换行)。

         我们也可以得出以下结论:

 

当前元素分类(float:right) 下一个紧邻元素分类(不包含float) 结论
块级元素(a) 块级元素(b) b会填充a遗留下来的空间,若a会和b发生重叠(父容器宽度减少),a的图层在上面。
内联元素(b) b会填充a遗留下来的空间。
内联元素(a) 块级元素(b) b不会跟随a的移动。
内联元素(b) b会填充a遗留下来的空间。

         后续的内联元素还是不会与前面的元素发生冲突而重叠,但是后面的位block元素则会重叠;

         

        如果相邻的元素都设置了float属性,那么后面的float紧跟着前一个float属性向左或向右对齐,不够则换行;

 

        如何解决浏览器长度不够导致的问题??方案就是:把添加float的属性的div元素嵌入在一个div中,并给此div添

        加width和height属性。浏览器宽度缩小时,也不会发生变形。

本文转载自:

共有 人打赏支持
下一篇: HTML布局
粉丝 0
博文 3
码字总数 37
作品 0
广州
后端工程师
私信 提问
CSS float相关详解

float属性是CSS常用的一个属性,应用场景广泛,同时也是一个难点,涉及到一些相关细节及注意点。因此,就特别整理总结一下。 一、float介绍 float元素也称为浮动元素,设置了float属性的元素...

Ruheng
2017/12/05
0
0
【前端Talkking】 CSS系列——CSS深入理解之float浮动

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有"刨根问底"...

micstone
05/15
0
0
浮动元素容器的clearing问题

网页设计时,我经常遇到下面这个问题,一直不知道怎么解决。 今天,总算全部理解了,一定要写下来。 1. 问题的由来 有这样一种情形:在一个容器(container)中,有两个浮动的子元素,如图一...

阮一峰
2009/04/06
0
0
Div+Css布局教程(-)CSS必备知识

目录: 1、Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解。 一、CSS布局属性 Width:设置对象的宽度(width:45px)。 Height:设置对象的高度(Height:45px;)。 Back...

城固如春
2016/11/12
3
0
CSS中clear:both的理解

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。...

dhb_oschina
2013/08/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker Java API 选型

因为工作原因需要使用Java调用装有docker环境的机器完成打镜像 上传镜像库的操作,进过调查,发现了两个比较常用的Java API工具,分别是 docker-java 和 spotify-docker-client,Github地址分...

MrPei
6分钟前
1
0
关ASCII码中的特殊字符10和13

10 : 是 LF 即 "\n" 13:是CR 即 "\r" 在不同的操作系统中,表示的方式是不一样的。在UNIX系统中,换行符使用"\n" , 在 windows 系统中换行使用 "\r\n"; 在旧版macOS中换行使用回车符"/r",...

Canaan_
7分钟前
0
0
MaxCompute 表(Table)设计规范

表的限制项 表(Table)设计规范 表设计主要目标 表设计的影响 表设计步骤 表数据存储规范 按数据分层规范数据生命周期 按数据的变更和历史规范数据的保存 数据导入通道与表设计 分区设计与逻辑...

阿里云官方博客
14分钟前
1
0
border实现等高布局

效果图 实现上图效果的全部html+css代码 <div class="box"> <nav> <h3 class="nav">导航1</h3> <h3 class="nav">导航2</h3> </nav> <section> <div cla......

呵呵闯
25分钟前
1
0
MaxCompute 表(Table)设计规范

表的限制项 表(Table)设计规范 表设计主要目标 表设计的影响 表设计步骤 表数据存储规范 按数据分层规范数据生命周期 按数据的变更和历史规范数据的保存 数据导入通道与表设计 分区设计与逻辑...

阿里云云栖社区
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部