感觉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中的Position、Float属性的一些深入探讨

经验分享：CSS浮动(float,clear)通俗讲解

关于css中float的理解的更多相关文章

  1. CSS中float和Clear的使用

    CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...

  2. 简要的谈一谈我对CSS中长度单位的理解

    CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是 ...

  3. css中line-height的理解_介绍line-height实际应用

    一.line-height的定义 css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同.line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块 ...

  4. 转: CSS中float和clear的理解

    float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...

  5. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  6. css中float left与float right的使用说明

    转自:http://www.jb51.net/css/33740.html   脚本之家 No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block( ...

  7. CSS中float属性和clear属性的一些笔记

    在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...

  8. 解决CSS中float:left后需要clear:both清空的繁琐步骤(转)

      之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...

  9. 解决CSS中float:left后需要clear:both清空

    现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对 ...

随机推荐

  1. 【UI测试】－－帮助设施

  2. windows下忘记mysql的root密码

    1.停止mysql 2.命令行启动mysqlmysqld --defaults-file="c:\mysql\mysql server 5.1\my.ini" --console ...

  3. SpringMVC学习笔记：单例与并发问题

    Spring中的Bean默认都是单例(singleton),Spring中Bean的scope属性有五种类型: singleton 表示在spring容器中的单例,通过spring容器获得该bean时 ...

  4. Python Tutor

    Python Tutor Python Tutor 是由 Philip Guo 开发的一个免费教育工具,可帮助学生攻克编程学习中的基础障碍,理解每一行源代码在程序执行时在计算机中的过程.通过这个工具, ...

  5. mybatis学习 九 代理开发

    1.作用: 实现创建一个接口后把mapper.xml由mybatis生成接口的实现类,通过调用接口对象就可以获取 mapper.xml 中编写的 sql. 2.实现步骤: 2.1 创建一个接口 (1) ...

  6. NOIP模拟测试1(2017081501)

    好,今天是cgg第一次举行模拟测试,希望各位支持. 时间限制:2小时 题目链接: 题目一:水得都没名字了 题目二:车站 题目三:选数 不要觉得2小时太少,我的题目很良心,都很简单. 答案可以在模拟测试 ...

  7. 2018.11.08 NOIP模拟 班车（倍增+dfs+bit）

    传送门 对于每个点离线处理出向上走2i2^i2i班车到的最上面的点. 然后每个询问(u,v)(u,v)(u,v)先把(u,v)(u,v)(u,v)倍增到刚好走不到lcalcalca的情况(有一个点如果 ...

  8. 2018.11.01 NOIP训练 梭哈（模拟）

    传送门 这题貌似不考智商啊. 直接按题意写就可以了. 事实上把牌从小到大排序之后写起来很舒服的. 然后就是有些地方可以人脑减代码量和判断次数. (提示:满堂红和某几种同类型的牌的大小判断) 然后注意A ...

  9. CAS 单点登录 服务器整合

    概述 现在企业内部的系统越来越多,如果各个应用都有自己的用户系统,那么用户将不得不要记住不同系统的用户名密码,因此独立的用户系统应运而生,各个系统之间通过单点登录的方式,这样内部只需要记住一个用户名和 ...

  10. s4-介质访问控制子层-1 MAC子层

    数据链路层被分成了两个子层:MAC和LLC MAC子层要解决什么问题? 介质访问控制(Madia Access Control) 数据通信方式 单播(unicast):One - to - One ...