文档章节

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

 小郭偷宝
发布于 2016/11/27 14:49
字数 2133
阅读 202
收藏 0
点赞 0
评论 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属性。浏览器宽度缩小时,也不会发生变形。

本文转载自:

共有 人打赏支持
粉丝 0
博文 3
码字总数 37
作品 0
广州
后端工程师
CSS float相关详解

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

Ruheng ⋅ 2017/12/05 ⋅ 0

【前端Talkking】 CSS系列——CSS深入理解之float浮动

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

micstone ⋅ 05/15 ⋅ 0

Div+Css布局教程(-)CSS必备知识

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

城固如春 ⋅ 2016/11/12 ⋅ 0

浮动元素容器的clearing问题

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

阮一峰 ⋅ 2009/04/06 ⋅ 0

CSS中clear:both的理解

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

dhb_oschina ⋅ 2013/08/15 ⋅ 0

div+css布局之float与clear的用法

CSS Float Layout Basics - CSS浮动布局基础:基于浮动的布局利用了float(浮动)属性来并排定位元素,并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果,例如环绕在照片周围,...

oecp ⋅ 2011/06/10 ⋅ 1

网页设计技巧:CSS布局调试的有效方法v

出处:天极网软件频道 责任编辑:杨玲 网页设计中CSS布局 是很重要的部分,下面介绍几种检查调试CSS布局 的有效方法。 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

Div+CSS常见错误总结

CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css...

Yue_h ⋅ 2013/12/02 ⋅ 0

html中div使用自动高度,即不设置height属性要注意的问题

为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高; 2.可以方便的容纳其他html标签; static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖...

坑爹的谢尼玛 ⋅ 2016/02/05 ⋅ 1

div相对定位于绝对定位

一、CSS中的块模型 在CSS的定义中,有的html标签被浏览器当成一个块来显示,比如div、table、p、ul等等,我们称之为块元素;有的html标签被浏览器显示在文本行之间,如a、span、font等等,我...

凉亭-月下殇 ⋅ 2016/11/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

NFS介绍 NFS服务端安装配置 NFS配置选项

NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导...

lyy549745 ⋅ 32分钟前 ⋅ 0

Spring AOP 源码分析 - 筛选合适的通知器

1.简介 从本篇文章开始,我将会对 Spring AOP 部分的源码进行分析。本文是 Spring AOP 源码分析系列文章的第二篇,本文主要分析 Spring AOP 是如何为目标 bean 筛选出合适的通知器(Advisor...

java高级架构牛人 ⋅ 55分钟前 ⋅ 0

HTML-标签手册

标签 描述 <!--...--> 定义注释。 <!DOCTYPE> 定义文档类型。 <a> 定义锚。超链接 <abbr> 定义缩写。 <acronym> 定义只取首字母的缩写。 <address> 定义文档作者或拥有者的联系信息。 <apple......

ZHAO_JH ⋅ 57分钟前 ⋅ 0

SylixOS在t_main中使用硬浮点方法

问题描述 在某些使用场景中,应用程序不使用动态加载的方式执行,而是跟随BSP在 t_main 线程中启动,此时应用代码是跟随 BSP 进行编译的。由于 BSP 默认使用软浮点,所以会导致应用代码中的浮...

zhywxyy ⋅ 今天 ⋅ 0

JsBridge原理分析

看了这个Github代码 https://github.com/lzyzsd/JsBridge,想起N年前比较火的Hybrid方案,想看看现在跨平台调用实现有什么新的实现方式。代码看下来之后发现确实有点独特之处,这里先把核心的...

Kingguary ⋅ 今天 ⋅ 0

Intellij IDEA神器常用技巧五-真正常用快捷键(收藏级)

如果你觉得前面几篇博文太啰嗦,下面是博主多年使用Intellij IDEA真正常用快捷键,建议收藏!!! sout,System.out.println()快捷键 fori,for循环快捷键 psvm,main方法快捷键 Alt+Home,导...

Mkeeper ⋅ 今天 ⋅ 0

Java 静态代码分析工具简要分析与使用

本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代码分析工具 (Checkstyle,FindBugs,PMD,Jtest),最后从功能、特性等方面对它们进行分析和比较,...

Oo若离oO ⋅ 今天 ⋅ 0

SpringBoot自动配置小记

spring-boot项目的特色就在于它的自动配置,自动配置就是开箱即用的本源。 不过支持一个子项目的自动配置,往往比较复杂,无论是sping自己的项目,还是第三方的,都是如此。刚接触会有点乱乱...

大_于 ⋅ 今天 ⋅ 0

React jsx 中写更优雅、直观的条件运算符

在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符 Conditional Operator condition ? expr_if_true : expr_if_false 在jsx中书写条件语句我们经常都...

开源中国最帅没有之一 ⋅ 今天 ⋅ 0

vim编辑模式与命令模式

5.5 进入编辑模式 从编辑模式返回一般模式“Esc” 5.6 vim命令模式 命令 :“nohl”=no high light 无高亮,取消内容中高亮标记 "x":保存退出,和wq的区别是,当进入一个文件未进行编辑时,使...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部