float大概是css3以前网页布局里最常用的一个属性了，经常看到一言不合就浮动的代码，就一起来深入挖掘一下这个一半天使一半魔鬼的属性吧。

本文是读张鑫旭大神慕课网float视频后的一些总结及一些拓展用法，视频地址：http://www.imooc.com/learn/121。该视频初读很枯燥，认真读后会发现更枯燥。。。。。。不过遇到坑之后再去读就会发现良心视频，字字珠玑。闲话不多说，现在开始：

1.float的起源

　　浮动最初的设计是用来做文字的环绕效果的，这也是设计者想让我们做的东西。

2.float的参数

　　float属性的参数取值有三个：

　　left：表示元素浮动在左边。

　　right：表示元素浮动在右边。

　　none：对象不浮动，遵循标准文档流。

3.效果展示（以float：left为例，float：right的情况只是位置的不同）

<style>

div{

    height: 20px;

}

    .d1{

        width: 50px;

        background: hsl(100,50%,80%);

    }

    .d2{float: left;

        width: 100px;

        background: hsl(150,50%,80%);

    }

    .d3{

        width: 250px;

        height: 100px;

        background: hsl(10,50%,80%);

    }

    .d4{float: left;

        width: 300px;

        background: hsl(250,50%,80%);

    }

    span{

        margin-right: 3px;

        border-right: solid 1px #ccc;

        background-color: hsl(60,50%,80%);

    }

    .s3{

        float:left;

    }

</style>

<body>

<div class="d1">div1</div>

<div class="d2">div2有float</div>

<div class="d3">div3</div>

<span class="s1">span1</span>

<span class="s2">span2</span>

<span class="s3">span3有float</span>

<div class="d4">div4有float</div>

<span class="s4">span4 </span>

</body>

　　当浏览器宽度不够长时：

　　当浏览器宽度足够长时：

　　我们可以得出以下几个结论：

当浮动元素为块状元素时，他的下一个紧邻元素（不浮动）是块状元素时会与该浮动元素发生重叠，该浮动元素会在上方。如果下一个紧邻元素为内联元素时会紧跟该浮动元素。

当浮动元素为内联元素时，他的下一个紧邻元素（不浮动）是块状元素时不会移动，但宽度不够也会发生重叠。如果下一个紧邻元素为内联元素时会紧跟该浮动元素。

4.浮动的破坏性

　　设置了float的元素会脱离文档流，会导致其父元素出现高度“坍塌”。

<div style="border:3px dashed #ddd">

    <p>我还没设置float属性</p>

</div>

<div style="border:3px dashed #ddd">

    <p style="float:left">我设置了float属性</p>

</div>

5.浮动的包裹性

　　这是没有float的div

　　这是个带有float的div

6.浮动去空格

　　这个已经在上面代码和结论中中有所展示，简单来说就是正常文档流中两个内联元素之间以及上下会默认有一段缝隙，而浮动可以清除这个缝隙，让两个元素无缝结合，也会清除上下之间的缝隙。

7.清除浮动的影响

　　7.1 使用clear属性

　　a.将<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿，也是最简单的清除浮动的方法，但是不推荐。

<div style="border:3px dashed #ddd">

    <p style="float:left">我设置了float属性</p>

    <div style="clear:both"></div>

</div>

　　

　　b.after伪元素和zoom

　　after，就是指标签的最后一个子元素的后面。因此我们可以用CSS代码生成一个具有clear属性的元素

<style>

.mydiv{

        border:3px dashed #ddd

    }

    .mydiv:after{

        content: "";

        clear:both;

        display: block;

    }

</style>

<body>

<div class="mydiv">

    <p style="float:left">我设置了float属性</p>

</div>

</body>

但是ie6/7无法识别伪元素after，就得用zoom方式，例：

.mydiv{

        border:3px dashed #ddd;
　　　　　zoom:1

    }
　　7.2 BFC
给父元素添加浮动，或者overflow:hidden,position:absolute等可以使元素BFC化的属性，下节单独探讨BFC的生成条件和布局规则，例：
<style>

    .mydiv{

        border:3px dashed #ddd;

        overflow: hidden;

    }

</style>

<body>

<div class="mydiv">

    <p style="float:left">我设置了float属性</p>

</div>

</body>

关于float的布局以及清除影响就先到这了，有遗漏和错误的地方欢迎指正，下节来一起看看BFC到底是什么，他是如何布局的，为什么可以用来清除浮动。

BFC化清除浮动：

http://www.cnblogs.com/wangxiaosan/p/5986072.html

　　

浅谈float浮动的更多相关文章

  1. 浅谈CSS浮动属性

    要介绍css的float浮动属性,就必须先了解一下标准文档流 标准文档流:   在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充.   HTML页面的标准文档流(默 ...

  2. 女屌丝前端逆袭记（一）之浅谈float

    提到前端,相信作为开发者的你或是正在看这篇文章的你并不陌生.前端可以说是直接与用户打交道的一个端口,不论是页面前端亦或是后端界面的前端,都是直接与用户对接的,因此前端设计对于一个网站或管理系统,都是至 ...

  3. 【css】浅谈BFC

    定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...

  4. BFC 浅谈

    写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...

  5. 浅谈Java中的equals和==(转)

    浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str ...

  6. 浅谈Java中的equals和==

    浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: String str1 = new String("hello"); String str2 = ...

  7. 浅谈c语言结构体

    对于很多非计算机专业来说,c语言课程基本上指针都不怎么讲,更别说后面的结构体了.这造成很多学生对结构体的不熟悉.这里我就浅谈一下我对结构体的认识. 结构体,就是我们自己定义出一种新的类型,定义好之后, ...

  8. 安卓开发_浅谈Android动画（四）

    Property动画 概念:属性动画,即通过改变对象属性的动画. 特点:属性动画真正改变了一个UI控件,包括其事件触发焦点的位置 一.重要的动画类及属性值: 1.  ValueAnimator 基本属 ...

  9. 浅谈Java中的深拷贝和浅拷贝（转载）

    浅谈Java中的深拷贝和浅拷贝(转载) 原文链接: http://blog.csdn.net/tounaobun/article/details/8491392 假如说你想复制一个简单变量.很简单: ...

随机推荐

  1. 开发人员看测试之细说JBehave

    上篇我们说到如何从Github上clone出一个JBehave项目,既是为了学习JBehava,也是为了熟悉下Github.从clone下来的项目看来,基本没什么问题,稍微捋一捋就可以运行,但是就cl ...

  2. 12个来自 Codrops 的创新交互和动画效果

    产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...

  3. NET中验证控件表达式汇总

    ASP.NET为开发人员提供了一整套完整的服务器控件来验证用户输入的信息是否有效.这些控件如下: 1.RequiredFieldValidator:验证一个必填字段,如果这个字段没填,那么,将不能提交 ...

  4. Android：StatFs类 获取系统/sdcard存储空间信息

    在存储文件时,为了保证有充足的存储空间大小,通常需要知道系统内部或者sdcard的剩余存储空间大小,这里就需要用到StatFs类. 1. 判断 SDCard 是否存在,并且是否具有可读写权限 /** ...

  5. Windows Azure Cloud Service (11) PaaS之Web Role, Worker Role(上)

    <Windows Azure Platform 系列文章目录> 本文是对Windows Azure Platform (六) Windows Azure应用程序运行环境内容的补充. 我们知 ...

  6. [译]学习IPython进行交互式计算和数据可视化（七）

    第六章:定制IPython 对于高级用户,IPython可以进行定制和扩展.在本章结束之后,你将会知道: 怎样创建和使用自定义配置文件 怎样为高级功能进行IPython扩展 怎样在notebook中使 ...

  7. jquery实现轮播图

    /** * Created by hui on 2015/11/3. */ $(function(){ var circleLi = $('.poster-item'); var liLength = ...

  8. IOS编程 图片缓存模块设计

    手机客户端为什么会留存下来?而不是被一味的Wap替代掉?因为手机客户端有Wap无可替代的优势,就是自身较强的计算能力. 手机中不可避免的一环:图片缓存,在软件的整个运行过程中显得尤为重要. 先简单说一 ...

  9. 开始MS SQL Server 2016之旅

    下班前一刻,把MS SQL Server 2016安装好,国庆回来之后,就可以学习之旅......

  10. Mysql日期统计函数简介

    NOW() 返回当前的日期和时间 CURDATE() 返回当前的日期 CURTIME() 返回当前的时间 DATE() 提取日期或日期/时间表达式的日期部分 EXTRACT() 返回日期/时间按的单独 ...