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. IOS开发初步

    由于工程实践项目的原因,得学习下IOS开发,今天才知道苹果09年才出的开发工具和开发包,也就是说,满打满算,现在顶多有5年IOS开发的工作经验.在我国2010年才火起来,因为那时候国内的iphone4 ...

  2. weback学习笔记

    weback可以把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.同时支持amd cmd CommonJS语法.同时可以和gulp一块使用. ...

  3. 如何调试PHP程序

    一.PHP自带的调试功能 1.修改php.ini )开发环境 需要打开报错输出显示,方便开发者调试. display_errors = On )生产环境 不能直接将错误输出,而是记入日志,以免透露路径 ...

  4. java设计模式(二)---工厂方法模式

    2普通工厂方法模式 就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建. 2.1创建接口 /** * 发送接口 * Created by mrf on 2016/2/25. */ public ...

  5. 在SQL Server里禁用聚集索引——真的好么？

    有人问了我一个最有意思的问题:“你能禁用聚集索引么?” 对这个问题,我先是吓了一跳,因为我从未想过禁用聚集索引,因为聚集索引代表表数据,对这个最有趣问题,我立即答道:“我认为可以,但是...” 好吧, ...

  6. 单例模式ARC和非ARC

    ARC环境下的单例模式: static id _instance = nil; + (id)allocWithZone:(struct _NSZone *)zone { if (_instance = ...

  7. 搭建CnetOS6.5x64最小系统及在线yum源的配置

    CentOS系统作为红帽系列的一款linux系统,因为其免费.开源,在中小企业中得到了广泛应用,生产上为了更好的利用资源,都采用最小系统安装,因为一个图形界面都会占去系统资源的30%到40%,生产上一 ...

  8. helper实现隐藏前台特效

    想实现下面的功能:如下图所示 点击已结束按钮,使上面的红色跳转到已结束活动按钮上面,本来前台代码里面是使用了一个action来实现的,但是我改了点东西,使跳转不了. 前台代码 <ul class ...

  9. .net的垃圾回收机制简述

    .如何理解.net中的垃圾回收机制. .NET Framework 的垃圾回收器管理应用程序的内存分配和释放.每次您使用 new 运算符创建对象时,运行库都从托管堆为该对象分配内存.只要托管堆中有地址 ...

  10. ios开发入门资料整理

    说到 iOS 开发,自己学得也很浅.不过至少独立一人完成了一个应用的开发到 App Store 上线整个过程.既然有人让我说些推荐和建议,就分享一下. 首先建议阅读 Start Developing ...