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 ...
随机推荐
- Codeforces Round #242 (Div. 2) C. Magic Formulas
解题思路是: Q=q1^q2.......^qn = p1^p2......^pn^((1%1)^....(1%n))^((2%1)^......(2%n))^.... 故Q的求解过程分成两部分 第一 ...
- 2001. Counting Sheep
After a long night of coding, Charles Pearson Peterson is having trouble sleeping. This is not onl ...
- WZJ的blog开通了
WZJ的blog开通了
- Linux 的cp命令
Linux 的cp命令 功能: 复制文件或目录说明: cp指令用于复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有文件或目录复制到此目录中.若 ...
- Maven3路程(一)用Maven创建第一个web项目(1)
一.创建项目 1.Eclipse中用Maven创建项目 上图中Next 2.继续Next 3.选maven-archetype-webapp后,next 4.填写相应的信息,Packaged是默认创建 ...
- POJ3903:Stock Exchange(LIS)
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87125#problem/E 题目: Description The world ...
- as3如何做出残影效果
在页游中,时不时能看到人物做一些快速移动动作如冲刺时,有残影效果,强化了画面表现.实际人肉眼之所以能看到残影的效果,是因为观察到的物体会在人视线中残留几十毫秒时间,当运动物体运动太快时,人肉眼所见未能 ...
- nginx“虚拟目录”不支持php的解决办法
这几天在配置Nginx,PHP用FastCGI,想装一个phpMyAdmin管理数据库,phpMyAdmin不想放在网站根目录 下,这样不容易和网站应用混在一起,这样phpMyAdmin的目录就放在别 ...
- JQuery插件让图片旋转任意角度且代码极其简单
引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...
- Android中Activity的四种启动模式
要了解Android的启动模式先要了解一下Activity的管理方式: 1.Activity的管理机制 Android的管理主要是通过Activity栈来进行的.当一个Activity启动时,系统根据 ...