float属性
float属性介绍
float给人一种捉摸不透的感觉,不过可以依照浏览器的解析机制(根据HTML文档,从上往下解析),对float属性了解一二。float有四种值:none/left/right/inherit,我们主要关注的是left/right。
float的出现,最初是为了实现图文环绕的效果,后来渐渐的也被用于其他方面,实现一些特殊的排版。
float的特性
1、float元素存在占位,并未完全脱离文档流;float元素虽然脱离了父元素,不过会影响行内元素(inline/inline-block)。如:
<div style="background:#00f;color: #fff;">
父元素中的行内元素
<div style="float: left;width: 100px;height: 50px;background: #f00;">float元素</div>
</div>
<span style="display:inline-block;background: #0f0;">我是行内元素</span>
效果:
2、absolute元素是可以通过top/bottom/left/right调整自己的位置,而float元素受其他元素的影响,通过其他元素确定自身的位置,如:
<div style="background: #f00;">我是块级元素,float元素在下面</div>
<div style="background: #00f;width: 100px;height: 50px;float: left;">float</div>
效果:
3、float元素之间在占位上是相互影响的,而absolute元素即使处于同一层,在占位上是互不影响的。如:
<!-- absolute1被absolute2覆盖了 -->
<div style="background: #f00;width: 100px;height: 50px;position: absolute;">absolute1</div>
<div style="background: #00f;width: 100px;height: 50px;position: absolute;">absolute2</div>
<div style="background: #f00;width: 100px;height: 50px;float: right;">float1</div>
<div style="background: #00f;width: 100px;height: 50px;float: right;">float2</div>
效果:
注:如果父元素想包含float的子元素,可以触发父元素的BFC
float属性的更多相关文章
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- CSS布局 ——从display,position, float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- CSS布局 ——从display,position, float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- (十一)学习CSS之float属性
参考:http://www.w3school.com.cn/cssref/pr_class_float.asp 定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕 ...
- 关于css float 属性以及position:absolute 的区别。
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
- 关于浮动float属性和position:absolute属性的区别
最近返回头看了很多书籍,一直在纠结float属性和absolute绝对定位的区别和使用的情况,给大家分享一下自己的心得和体会吧. 1,float属性 float属性意义是让元素拜托独占一行的霸道总裁, ...
- 使用float属性布局时父元素高度不能自适应的解决方法
在网页的布局过程中,经常会用到float属性来实现页面的左右布局,但是有个问题就是父元素的高度并不能根据子元素的高度自适应.比如下面这段代码: <!DOCTYPE html> <ht ...
随机推荐
- 【转】移动web页面使用字体的思考
回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的 ...
- 当编译AFNetworking 2.0时出现了Undefined symbols for architecture i386
当将AFNetworking添加到工程后编译时出现 Undefined symbols for architecture i386: "_SecCertificateCopyData&quo ...
- ACM: CodeForces 140A New Year Table-数学几何
CodeForces 140A New Year Table Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d ...
- vsfptd
如果想通过vsftpd来在主机和虚拟机之间拿数据,可以通过这种方法: 在主机的资源管理器中输入:ftp://虚拟机里面Linux的IP(如192.168.2.112)/ 如果反过来,需要如下:ftp: ...
- Net-SNMP是线程安全的吗
原文地址 : http://www.net-snmp.org/wiki/index.php/FAQ:General_19 Net-SNMP是线程安全的吗? 确切的说,不是.不过呢,在多线程管理的应用进 ...
- 在Eclipse中使用JSHint检查JavaScript
之前使用 JSlint 来校验 JavaScript 代码,发现灵活性不够,因此改用 JSHint.按照官方的说法,JSHint 是一个社区驱动(community-driven)的工具,用于检测Ja ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- session/SessionFactory线程非安全和线程安全
SessionFactory负责创建session,SessionFactory是线程安全的,多个并发线程可以同时访问一个 SessionFactory 并从中获取Session实例. (Sessio ...
- RecyclerView使用时遇到的问题
一.概述 二.常见问题: 1.如何为RecyclerView的Item设置点击事件? 1.1 问题描述 类似于下列方法 RecyclerView.setOnItemClickListener(OnCl ...
- winform记事本初步实现
public Form1() { InitializeComponent(); } private void 剪切TToolStripMenuItem_Click(object sender, Eve ...