浅谈float浮动
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浮动的更多相关文章
- 浅谈CSS浮动属性
要介绍css的float浮动属性,就必须先了解一下标准文档流 标准文档流: 在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充. HTML页面的标准文档流(默 ...
- 女屌丝前端逆袭记（一）之浅谈float
提到前端,相信作为开发者的你或是正在看这篇文章的你并不陌生.前端可以说是直接与用户打交道的一个端口,不论是页面前端亦或是后端界面的前端,都是直接与用户对接的,因此前端设计对于一个网站或管理系统,都是至 ...
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- BFC 浅谈
写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...
- 浅谈Java中的equals和==(转)
浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str ...
- 浅谈Java中的equals和==
浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: String str1 = new String("hello"); String str2 = ...
- 浅谈c语言结构体
对于很多非计算机专业来说,c语言课程基本上指针都不怎么讲,更别说后面的结构体了.这造成很多学生对结构体的不熟悉.这里我就浅谈一下我对结构体的认识. 结构体,就是我们自己定义出一种新的类型,定义好之后, ...
- 安卓开发_浅谈Android动画（四）
Property动画 概念:属性动画,即通过改变对象属性的动画. 特点:属性动画真正改变了一个UI控件,包括其事件触发焦点的位置 一.重要的动画类及属性值: 1. ValueAnimator 基本属 ...
- 浅谈Java中的深拷贝和浅拷贝（转载）
浅谈Java中的深拷贝和浅拷贝(转载) 原文链接: http://blog.csdn.net/tounaobun/article/details/8491392 假如说你想复制一个简单变量.很简单: ...
随机推荐
- try,catch,throw-----C++
1.try,catch,throw: try包含你要防护的代码 ,称为防护块. 防护块如果出现异常,会自动生成异常对象并抛出. catch捕捉特定的异常,并在其中进行适当处理. throw可以直接抛出 ...
- 机器学习&数据挖掘笔记_21（PGM练习五：图模型的近似推理）
前言: 这次练习完成的是图模型的近似推理,参考的内容是coursera课程:Probabilistic Graphical Models . 上次实验PGM练习四:图模型的精确推理 中介绍的是图模型的 ...
- [Python] Ubuntu12.04LTS
Ubuntu 12.04LTS中缺省安装了Python2.7.3. python -h 查看可用选项 python -V 查看Python版本 下面写个简单的测试程序: 新建HelloWorld.py ...
- javascript学习笔记（四）：事件处理函数和动态创建html标记。
1 HTML的事件属性 全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发 ...
- 跨平台的.NET运行环境 Mono 3.2发布
Mono是由Xamarin主办的一个开源项目平台,旨在让开发人员轻松构建跨平台的应用程序.Mono是基于ECMA标准来创建.NET框架,包括C#编译器和公共语言运行时(CLR),可以让.NET应用程序 ...
- 计算机中数据实体和数据表示形式（以C#为例）
摘自网络的一段话: “在程序代码中,可以用多种方式表示数据,十进制.十六进制.八进制都是常用的表示方式,但计算机内部永远就只使用二进制,与你写程序时用什么无关.你说要定义数组int a[10],其中涉 ...
- 解读 C 语言中的指针
我想对很多学习C语言的新手来说,指针无疑是一个难点.但是,我觉得指针也是C语言特别重要的一个特性.也许,你在除了C和C++以外的编程语言中,很少看到指针.而C++中,也多用引用,而非指针.指针,作为一 ...
- asp.net动态生成按钮Button控件
1.动态生成button控件及响应服务端和客户端事件 void BindButtons(){ foreach (var item in items) { Button Btn = new Button ...
- 最新微信公众平台js sdk整合PHP版
由于没有持续关注微信公众平台相关的开发,所以看到这个东西时,都没有耐心看完开发文档,或者不知道重点. 重点在哪呢?重点在示例代码:http://mp.weixin.qq.com/wiki/7/aaa1 ...
- marquee标签滚动效果
<marquee></marquee>标签,默认从最右侧往左滚动: direction:设置滚动的方向: height:设置标签高度, width:设置标签宽度: behavi ...