关于css中float的理解
感觉css里的float是个非常神奇的东西，神奇之处在于，你知道它是什么意思，但是用的时候总是不知道怎么实现效果。又或者它会很容易地影响到别的元素和属性。所以今天打算尝试一下float的各种设置，看看效果。在这篇博客里做个总结。
1. 设置float后对后面元素的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
border:1px solid red;
width:50px;
height:50px;
float: left;
}
.div2{
background: green;
widows: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
效果：
也就是说前面浮动元素会位于后续的非浮动元素的上方，确实是脱离了文档流。这大概就是“浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。”的意思吧。
而另一方面，如果把两个元素调换次序，则效果为：
这时候div1是浮动元素，会被上面的元素顶下来。即使改变div2的宽度，也依然如此。
但是这时候如果把div2设置为position:absolute的话，div1就会浮动上去，说明position也是脱离标准流的，互不干涉。
而设置了position：absolute属性的元素会覆盖接下来的浮动元素。
2. float和position的相互影响
如果在float上设置position：absolute的话，会覆盖float的属性。就不是浮动了。float失效
在float上设置position：relative的话，如果设置left/top/right/bottom等属性，则元素会先浮动到相应位置，然后再根据top/left/bottom/right所设置的距离发生偏移
在float上设置margin属性也是有效的。
参考：
关于css中float的理解的更多相关文章
- CSS中float和Clear的使用
CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...
- 简要的谈一谈我对CSS中长度单位的理解
CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是 ...
- css中line-height的理解_介绍line-height实际应用
一.line-height的定义 css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同.line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块 ...
- 转: CSS中float和clear的理解
float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...
- 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
- css中float left与float right的使用说明
转自:http://www.jb51.net/css/33740.html 脚本之家 No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block( ...
- CSS中float属性和clear属性的一些笔记
在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...
- 解决CSS中float:left后需要clear:both清空的繁琐步骤(转)
之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...
- 解决CSS中float:left后需要clear:both清空
现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对 ...
随机推荐
- sql条件查询-日期比较（取年月部分）
查询当年当月的数据: select * from compalete_task where to_Char(create_date,'yyyyMM') = to_Char(sysdate,'yyyyM ...
- 20155312 张竞予 2006-2007-2 《Java程序设计》第四周学习总结
20155312 2006-2007-2 <Java程序设计>第四周学习总结 课堂笔记 Ctrl+shift+T调出三个窗口,分别是"vi编写代码","jav ...
- hibernate 的evict 和clear
摘自百度知道:http://zhidao.baidu.com/question/63663640.html 问: 先创建一个Student,然后调用session.save方法,然后再调用evict方 ...
- 爬虫之mongodb数据库
一 mongodb的介绍 1.易用性:mongodb是一款强大.灵活并且易扩展的数据库.他面向于文档的数据库,而不是关系性数据库.不采用关系型主要是为了获得更好的扩展性.还有一个好处就是面向文档的数据 ...
- 2019.02.09 bzoj4710: [Jsoi2011]分特产（容斥原理）
传送门 题意简述:有nnn个人,mmm种物品,给出每种物品的数量aia_iai,问每个人至少分得一个物品的方案数(n,m,每种物品数≤1000n,m,每种物品数\le1000n,m,每种物品数≤10 ...
- 2018.10.29 bzoj1023: [SHOI2008]cactus仙人掌图（仙人掌+单调队列优化dp）
传送门 求仙人掌的直径. 感觉不是很难. 分点在环上面和不在环上分类讨论. 不在环上直接树形dpdpdp. 然后如果在环上讨论一波. 首先对环的祖先有贡献的只有环上dfsdfsdfs序最小的点. 对答 ...
- C#中string类型是值类型还是引用类型？（转）
出处:https://www.cnblogs.com/dxxzst/p/8488567.html .Net框架程序设计(修订版)中有这样一段描述:String类型直接继承自Object,这使得它成为一 ...
- WEB应用支持RESTFUL风格方法
REST概念 Restful就是一个资源定位及资源操作的风格.不是标准也不是协议,只是一种风格.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. REST风格 资源:互联网所有的事物 ...
- 修改oralce数据库用户名和密码
首先以sys用户登录数据库 一.修改用户名 查到到所需修改用户名称的用户需要:select user#,name from user$;(例如查到有一个normal的用户对应的user#=61) 修改 ...
- 张奎师弟参与devexpress chartControl绘图--解决了devexpress的chartControl控件不能添加系列的问题
using DevExpress.XtraCharts; using System; using System.Collections.Generic; using System.ComponentM ...