浮动
前言
浮动是怎么诞生的？浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已。
但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在， 在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。
一、浮动是什么？
1，浮动的意思是：漂浮移动，流动；浮躁，不稳定；动荡不稳定；不固定。
2，浮动是css布局非常强大的布局功能，也是理解CSS布局的关键问题所在，在CSSW中，包括div在内的任何元素都可以浮动的方式显示。
3，浮动的属性值有三个：float：none；float：left；float：right；
浮动不是任意的，其还是在父元素的范围之中，不能脱离于父元素的内容区域。
我们回到前面那个页面看看，浮动元素能不能浮动到父元素外面去。
4，常见问题及为什么要清除浮动：
如果我们不给父元素设置高度，我们知道如果它里面的元素不浮动的话， 那么这个外层的高是会自动被撑开的。
若浮动元素比它的父元素还高，那么它就会溢出父元素外面，点我看浮动元素溢出
当内层元素所有浮动后，则影响更大：
二、使用步骤
1.引用浮动
代码如下（浮动的使用）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 800px;
border: 1px solid red;
margin: 0 auto;
}
ul li{
float: left;
width: 170px;
margin: 10px;
list-style: none;
}
img{
width: 100%;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
<li><img src="img/7.png"></li>
<li><img src="img/8.png"></li>
</ul>
</div>
</body>
</html>
2.清除浮动
代码如下（清除）：
ul{
overflow: hidden;
}不是唯一的清除方式；例如：
方法1：父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议父元素高度固定的布局时使用。
方法2：
使用clear属性：在相同的父元素中，浮动的子元素之后添加一个空标签，设置样式为："clear：both;"标签可以是div，也可以是p，或者br等块元素。
原理：left在左侧不允许浮动元素; right在右侧不允许浮动元素; both在左右两侧均不允许浮动元素点我使用clear属性
优点：通俗易懂，容易掌握，适合菜鸟前期使用。
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，一旦代码量大的话，在后期维护中将是噩梦。
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。
方法3：对父元素设置overflow的样式，即overflow: auto/hidden;
原理：必须定义width，在IE6中还需要触发 hasLayout ，例如 zoom：1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，不能和position配合使用，无法显示需要溢出的元素；
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
1029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
