浮动的简单介绍
浮动可以改变元素标签的排列方式，最典型的应用就是让多个行内块元素在一行内排列显示。
一般来说，如果是多个盒子纵向排列用标准流即可，横向排列才需要考虑使用浮动。
浮动的语法：选择器{ float: 属性值;}，其中的属性有三个：none（元素不浮动，默认值）left（元素向左浮动）right（元素向右浮动）
浮动的规则是创建浮动框将其移动到一边，直到左边缘或右边缘触及一个包含块或另一个浮动框的边缘。
浮动需要注意的问题
浮动元素会脱离标准流（脱标）
1.脱离标准流的控制移动到指定位置，即为脱标
2.浮动的盒子不再保留原先的位置，该位置会被其他的标准流元素占用。实际上，添加了浮动属性值的盒子是浮于其他盒子上方的，因此盒子就算本来的位置没有变化，只是添加了一个浮动属性，也会让页面下方的标准流盒子向上填补该位置，形成一个盒子叠加的效果
正是因为以上的属性，浮动的盒子并不会导致父元素发生塌陷，因为实际上浮在父级盒子的上方，从而不会影响到它本身。
浮动的盒子会在一行显示
这里的“一行”，指的是浮动的盒子都会顶到边缘的上沿进行显示，因此当页面足够大时，所有浮动的盒子都会顶在最上方。当浏览器的窗口缩小时，一些超出屏幕显示范围的盒子就会下移。
浮动元素都具有行内块元素的特性
无论原先浮动元素是什么类型的元素，在添加浮动属性之后，都会带有行内块元素的特性。
行内元素在浮动之后可以直接添加宽度和高度。
浮动布局的方法
一般而言，为了使浮动的元素可以排列在需要的位置，会将浮动元素搭配一个标准流元素的父级进行使用。形象地说，就是将浮动元素装在一个设置好的箱子里，防止它随便“跑出来”。父元素掌管上下，子元素控制左右。
一般来说只要拼父级元素中有一个子级元素浮动，那么其他的兄弟元素要一起浮动，以免发生冲突。
清除浮动
在很多情况下，父元素的大小不能直接给出而是要用子元素去撑开盒子，这时如果有浮动的情况，会让子元素浮在父元素上方，导致父元素的高度变为0 。这时候就需要使用清除浮动的方法。
清除浮动的本质就是清除浮动元素造成的影响，但是如果父盒子本身设定了高度，就不需要额外清除浮动。若未清除盒子，就使用清除浮动使得父盒子的大小由子盒子确定，同时父级获得了高度，就不会影响后面的标准流标签了。
选择器{clear:属性值}
属性值有三种，即left, right, both。第一个对应的是不允许左侧有浮动元素，即清除左侧浮动的影响，后面的以此类推。在一般的开发当中都是使用both属性
额外标签法
在需要清除浮动的标签之后添加一个额外的标签把元素隔开，控制在父元素标签的盒子里。
<style>
.clear{
clear:both;
}
</style>
<body>
<div class = "box">
<div> div1 </div>
<div> div2 </div>
<div class = "clear"></div>
</div>
</body>
在后面也可以添加其他的空标签，但是一定要是块级元素，不能是行内元素。
为父级元素添加overflow属性
为父级添加overflow属性也可以清除浮动，其属性值设置为hidden，auto，scroll。
还是以上面的代码为例（去除后面添加的额外标签法的视为源码）
.box{
overflow:hidden;
}
在父元素的样式中添加这样的一行代码就可以实现清除浮动的功能。
overflow的一个缺点就是会隐藏溢出部分的盒子。
：after伪元素
：after法是额外标签法的升级版，但是也是给父元素添加。
<style>
.clearfix:after{
content: "";
display: block;
height: 0;
clear :both;
visibility: hidden;
}
.clearfix{ /*专为IE6\7设计以兼容*/
*zoom:1;
}
</style>
<body>
....
<div class = "box clearfix">
...
</div>
实际上就是在代码的最后添加了一个块级元素将父盒子撑开，与额外标签法的原理一样。
双伪元素清除浮动
<style>
.clearfix:before,
.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{ /*专为IE6\7设计以兼容*/
*zoom:1;
}
</style>
<body>
....
<div class = "box clearfix">
...
</div>
这样的做法相当于在子盒子的前后都加上了一个块级元素。
2371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
