浅谈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 假如说你想复制一个简单变量.很简单: ...
随机推荐
- Fiddler的学习
以下内容转自:http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html 仅为查找方便而复制~~ Fiddler是最强大最好用的We ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- Jeet – 先进，直观，灵活的 CSS 网格系统
Jeet 是一个先进的,直观的 CSS 网格系统.通过使用预处理器的强大功能,我们现在可以通过实际分数(或者浮点数)来生成一个基于百分比宽度和间隔的网格.让你用更少的代码,更快的速度构建页面布局. 您 ...
- Bootflat – 基于 Bootstrap CSS 框架的扁平化界面
Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...
- JavaScript之旅（DOM）
JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...
- 利用jstree插件轻松构建树应用
最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...
- C#方法的参数
- SQL --分组【Group By】
Group By:对数据进行分组,分组之后的数据就是“分组信息”,和原来表的信息,就没有联系了, 分组之后,可以取到分组数据,就是根据什么字段分组,就能取到字段的名字了.还能使用聚合函数. Group ...
- Firemonkey TEdit 切换不同 KeyboardType 样式
用代码切换 Edit 不同的键盘样式: procedure TForm1.Button1Click(Sender: TObject); begin Edit1.KeyboardType := TVir ...
- 图-最短路径-Dijktra（迪杰斯特拉）算法
1. 迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉算法于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中最短路径问题.迪杰斯特拉算法主要特点是以起始 ...