整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
篇文章讲了文档流相关知识，网页中html元素会按照标准规则排列，块级元素从上到下，行内元素从左到右排列。如果这时想让一个元素排到右侧，怎么办？
这时就可以使用浮动float 和 定位 position ，今天主要介绍float，关于float属性稍微有点难理解，它是把双刃刀，会用的会做出各种很好的效果，不会用的反而问题越来越多。
float 属性有以下几个值：
如下示例：
左浮动
右浮动
这里注意：右浮动是从右到左排列元素，子元素的html实际位置是按照，子元素1>子元素2>子元素3的顺序，但是右浮动的显示效果是子元素1在最右边，依次向左，正好和元素实际位置相反。
float 浮动可归纳以下几点：
浮动float最初设计的目的是实现文字环绕的功能，如下图所示：
没有使用浮动：
使用浮动后：
从上图看到图片脱离了文档流浮动到左边，但是没有脱离文本流，文本环绕着图片。
文字环绕效果除了float属性能够实现，再找不到其它方法，这就是它的真正用处，但是在早期网页制作中，它被用来实现各种布局，比如水平的菜单，或者左边图片右边文字等等效果。但是在使用float的过程中出现了各种问题，比如父元素高度塌陷，破坏相邻元素的布局等等。
当一个元素里面的子元素使用了float浮动，其父元素如果没有设置高度或者高度小于浮动元素的高度时，父元素就会出现如下示例：
没有使用浮动：
使用浮动后：
如上图红色边框就是父元素，没使用float前，它的高度被子元素撑开。当使用float后可以看到父元素的高度变成0了，这就是高度塌陷。
float 浮动可以使一个行内元素变成块级元素，准确地说应该更像是 inline-block 行内块级元素，但又不完全一样。看下如下示例：
没有使用float前：
子元素是一个块级元素，占满了一行，其宽度默认为100%。
使用float后：
可以看到，子元素的宽度变了，等于其内容的实际宽度。和行内元素一样，但是不同之处就是浮动可以使元素浮动到左侧或者右侧，如上图。行内元素则不行，只能从左到右排列，这就是float的特殊之处，所以常常被用来制作一些复杂的布局效果。
float虽然能够解决一些布局的问题，但是用不好就会造成页面布局混乱，出现各种奇怪的问题，如下示例：
没有使用float前：
如上图，所有元素从上到下排列，父级那个元素和上下相邻。
使用float后：
此时可以看到，父级那个元素下面的相邻元素2，由于父级元素高度塌陷，也向上移动位置，这样导致浮动元素就会覆盖下面的相邻元素2，这不是我们期望的结果。
怎么解决了？要么给父级元素设置一个固定的高度，这个高度要大于浮动元素的高度，或者使用clear属性清除浮动。
为了解决浮动造成的破坏，此时就要使用各种方法来清除浮动，常见的有以下三种方法：
1、给浮动元素父级元素使用 overflow
如下示例：
overflow:hidden;
zoom:1;可以看到父级元素的高度不塌陷了，被子元素撑高了。由于没有设置高度，其高度等于子元素的高度。
overflow 的缺点就是，当子元素宽度和高度超出父级时，会隐藏部分子元素内容。
在早期为了兼容ie浏览器，除了使用overflow：hidden；还要加上zoom：1；否则会出现一些怪异的现象。
2、使用clear属性
clear 属性用来是一个元素不受相邻浮动元素的影响，它有 both （清除左右浮动），left（清除左浮动），right（清除右浮动），none （允许其相邻元素有浮动，默认值）。
如下示例：
clear：both；看到这里和使用overflow的效果一样，不同之处是，要额外在父级元素中增加一个标签来做清除浮动。这也就是它的最大缺点。
使用after伪类，可以不用额外增加一个多余的标签，如下示例：
.fix:after{
display:block;
content:'';
clear:both;
line-height:0;
}综上所述，方法3是最后的。以上三种方法都是解决父级高度塌陷问题，还有一种情况就是给相邻元素2设置clear 属性，会是什么效果？
如下示例：
<div class="d2" style="clear:both;">
相邻元素2
</div>如上图看到相邻元素2，恢复到默认文档流中的位置，但是发现父级元素的高度仍然塌陷，这种清除浮动的情况是比较特殊的，和之前的不一样。
float 是不是有点难懂，没办法浮动的初衷就不是用来布局的，被玩坏了。但是不要紧，float在如今网页布局中已经很少使用，css3已经有了新的方案，比如flex等。所以关于本篇了解下就可以了，不需要完全掌握。
感谢阅读，欢迎指出错误或者补充。
上篇：前端入门——网页中的文档流和布局
loat属性
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
float属性使元素能在设计中到处移动，从而让其他元素围绕它们。元素的浮动是水平而不是垂直方向的，只有三种可能属性值：none，right，left.使用这两个值时，浮动元素将浮动到容器元素所允许的最右或者最左.
clear属性
清除浮动元素 取值：left,right,both,none ,inherit。这个规则只能影响使用清除的元素本身，不能影响其他元素。它表示框的哪些边不应该挨着浮动框。它让周围的元素为浮动元素留出空间。
float属性实例
把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
当框 1 向左浮动时，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
Clear属性实例
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像
阻止行框围绕浮动框,在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面
浮动和清理实例：
假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>
出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：又出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.clear { clear: both; }<div class="news"><img src="news-pic.jpg" /><p>some text</p><div class="clear"></div></div>
这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。
不过我们还有另一种办法，那就是对容器 div 进行浮动：
.news { background-color: gray; border: solid 1px black; float: left; }.news img { float: left; }.news p { float: right; }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>
这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。
页面布局的过程中，浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。
在我学习浮动的时候可是熬坏了脑筋，在这里我分享一下我对浮动这块知识的总结。
一、浮动的定义
使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
二、属性
float：left； 左浮动
float：right；右浮动
三、浮动的情况
下面我就用这个布局为例子来讲解浮动，css样式外面的div给了一个高度，其他的不多说。
1.左浮动float:left;
给里面的三个p标签 float:left; 属性，看一下是什么情况的。我们都知道块级标签会默认占据一行的所以他们是一排一个展示的，但是看下图会发现他们按照顺序排列成一排了。
2.右浮动 float:right;
同样的我们给box中的p标签一个 float:right; 属性。他们会按照顺序排到右边去了。
3.这一次我们只给第二个p浮动来看看会发生什么情况，这时候你会发现，3不见了，他其实在2的下面，我给3一个宽一点的宽度。会发现3在2的下面。
4.给3一个浮动
他会没有什么变化，因为浮动只会影响他后面的元素，如果上面的元素不浮动，他也不会上去的
5.把外面的div宽度变小一些，p浮动
如果父元素太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会换行显示。
6.浮动的特殊情况
以换行的那个元素为基准，如果有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素"卡住"。初始样式是左图.
7.浮动对文字的影响 给p标签浮动
浮动框只会占据自己的位置，使文字可以围绕浮动框显示
四、浮动之后有很多特性
1.块级元素可以横排显示
2.行内元素可以设置宽度和高度
3.元素没有设置宽度和高度时，宽度为内容撑开宽
4.支持margin
5.脱离文档流
6.提升半层级
问题:不支持margin:auto;
五、清除浮动
1. 为什么要清除浮动？
前面提到了我给了外面的div一个高度，这里我们不给他高度，让里面的p浮动看看会发生什么情况。
未浮动
浮动之后
我们会发现子元素浮动会造成父级盒子高度坍塌，这样如果下面在进行继续布局的话会使页面布局错乱，(下图中黄色的盒子是nav下的div)如果想要继续布局就要清除浮动了，这里我介绍几种清除浮动的方法。
标签和样子如下两幅图
父级的做法
1. 父级 紧邻兄弟法
给nav一个clear：both属性，下图会发现可以正常显示
缺点：只是让后面的元素正常显示，并没有撑开box的高度
2.父级给高度
box给高度，可以正常显示。
缺点：一般都是元素内容撑开高度，拓展性不好。
3.父级元素 display:inline-block;
box给display:inline-block;可以正常显示
缺点：父级盒子margin:auto;失效，会发现上部分和下面黄色中间有间隙。
4.父级overflow:hidden;
可以正常显示
缺点：需要配合宽度
子元素
1.要加给浮动元素末尾的后面再添加一个元素。加上一个clear属性
可以正常显示
缺点：随意的添加一个空元素，不符合代码规范
*请认真填写需求信息，我们会在24小时内与您取得联系。
