前言
关于float,我相信大家都接触过,也都用过,应该都知道float的作用以及使用float时呈现的效果。但是,如果你仅仅是停留在了解的基础上,我相信float的很多行为会让你大吃一惊。下面我将根据一些例子来描述下float的一些特性。(博客从CSDN博客导入,排版有问题,原博客可看:css浮动float
测试例子
例子1 - 所有元素使用float:
<div class="dt">
<div>测试块一</div>
<span class="float">
普通流 - 非float
</span>
</div>
css代码
float {
/* float:right;*/ 先不赋予float属性
background-color:#FFC0CB;
color:#fff;
展示结果很正常,很好理解,没有什么问题。那让我们看看给元素赋上float属性会是什么样吧。
.float {
float:right;
background-color:#FFC0CB;
}
- 现象一:父元素(虚线部分)高度收缩了,为什么呢? 哦,原来是float元素会脱离文档流,不再占用父元素的空间,既然不占用空间,对父元素来说,float就好像不存在一样咯;
- 现象二:还有个特性,不知大家注意到没,float元素和父元素(width:400px)是右边对齐的,所以我们又得出一个结论:虽然float是脱离文档流的,对父元素来说好像不存在似的,但它是不会跑到父元素边界的外面,浮动还是受到父元素的限制的;
-
现象三:如果浮动元素前面有相邻的块级元素(block)的话,会把浮动元素挤到下面。
提示:有时我们仅仅希望使用浮动来进行文档布局,浮动元素的尺寸仍然保留,这就需要用到浮动清除(clear)了,关于浮动清除,主要应用到css元素clear: both处理,更详细的了解可以去网上搜索相关资料
关于现象三,如果元素前面有相邻的行内元素(inline)呢,又会出现什么样的结果?测试一下,HTML代码修改如下:
<div class="dt">
<span>测试块一</span>
<span class="float">
普通流 - 非float
</span>
</div>
为了更清晰看见效果,修改css中 float值为left:
.float {
float:left;
background-color:#FFC0CB;
}
看到了吧,如果浮动元素前面有相邻的行级元素(inline)的话,是不会把浮动元素挤到下面,相反浮动元素会把行级元素内容挤到后面去
例子2 - 当块级元素或行内元素遇上文档流
为了更好的演示,将HTML作以下修改:
<div class="dt">
<div>测试块一</div>
<span class="float">
普通流 - float:left
</span>
<div style="background-color:red;color:#fff;">
No wonder there's so much cynicism out there. No wonder there's so much disappointment.
</div>
</div>
float {
float:left;
background-color:#FFC0CB;
border:solid 1px blue;
/* 设置透明样式 */
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
通过半透名的float元素可看到,float元素脱离文档流了,对块级元素框(红色北京部分)进行了覆盖,但块级元素(block)里的行内元素(英文字母)在float元素后,所以float元素并没有对这些文字进行覆盖。所以这里可得出结论:浮动是脱离文档流的,会覆盖块级元素(block)的框,但不能覆盖行内元素(inline)的框。
可以参照下面例子作进一步验证:
修改HTML如下(将块级元素标签div换成行内元素标签span):
<div class="dt">
<div>测试块一</div>
<span class="float">
普通流 - float:left
</span>
<span style="background-color:red;color:#fff;">
No wonder there's so much cynicism out there. No wonder there's so much disappointment.
</span>
</div>
看见了吧,通过半透明的float元素,已经不能看见红色的背景色了。所以浮动元素不会覆盖行内元素(inline),只会”挤压”行内元素的空间。
例子3- 行内元素(inline)带上浮动属性
<div class="dt">
<div>测试块一</div>
<span class="float" style="width:300px;height:200px;">
普通流 - 非float
</span>
</div>
.float {
/*float:left;*/
background-color:#FFC0CB;
}
span是一个行内元素(inline),所以,对它设置width和height属性,是不会有任何效果的,从展示结果可以看出,确实无任何影响。那我将span元素加上浮动属性,会是什么样呢?看下面例子:
.float {
float:left;
background-color:#FFC0CB;
}
看见了吧,行内元素(inline)加上浮动属性,就有了block的特性啦。
总结
float在网页设计中是用的非常广的一个特性,但它也是一个非常古怪、难琢磨的东西,要想透彻的理解它的特性,看来还是需要好好测试、验证。
版权声明:本文为博主原创文章,未经博主允许不得转载。
相关推荐
DIV+CSS布局:CSS浮动float属性详解 不解释
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
DIVCSS布局:CSS浮动float属性详解
从零开始学前端 - 6. CSS浮动float详解 示例代码 : 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 CSDN 上传的资源会自动涨积分,如有需要留下邮箱
CSS浮动属性Float详解 什么是CSS Float?
本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下
一、什么是浮动? 浮动,顾名思义,就是漂浮的意思。指的是一个元素脱离文档流,悬浮在父元素之上的现象。 二、如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动。 right 元素向右...
CSS浮动属性Float详解[收集].pdf
如何正确的理解CSS的float浮动属性.pdf
具体详细的阐述了css浮动如何解决和浮动产生的原因。
使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了CSS清除浮动float的三种方法小结,感兴趣的朋友跟随脚本之家小编一起看看吧
CSS无难事-浮动floatright的应用和li的高度问题.pdf
css实例教程 理解Float的含义.
css浮动有关问题css浮动有关问题css浮动有关问题
CSS深入理解之float浮动视频教程.txt 前端必备技能,助你快速掌握
我并没有对CSS所有的属性都有很清晰的情感化的理解,我用CSS才几年啊,我要学的...但是,对于CSS中常用的float属性,我还是有些感觉的,这也是本文的主旨所在。本文将会从我的一些感性的认识的角度讲解CSS float属性