CSS浮动初识
- 什么是浮动
float是css样式中的定位属性，用于设置标签对象（如：标签盒子、 标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。
基本语法格式：选择器{float:属性值;} - 特性
1.不会压住padding
2.加入了浮动，就具有了行内块的特性
3.找最近的父元素对齐，不会超出内边距
4.上一个元素是浮动，则顶部对齐，是标准流，则底部对齐
总结
浮动 ：目的让多个块级元素同一行上显示
float 浮漏特
浮：加了浮动的元素会浮起来，漂浮在其他标准流的盒子上面
漏：加了浮动的元素，他原来的位置漏给了标准流的盒子
特：特别需要注意的是，标准流父元素一起使用，其次，特别需要注意的是，浮动元素变成行内块元素 - 清除浮动
1.为什么要清除浮动：
当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)，明显影响了父元素的布局。
如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.son{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div style="background-color: blue;">
<div class="son">子元素</div>
</div>
</body>
</html>
这是父元素没有设置高的效果，高度有子元素决定，
当子元素浮动，脱离了标准流，父元素就没有高度了，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.son{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div style="background-color: blue;">
<div class="son">子元素</div>
</div>
</body>
</html>
2.清除浮动的方法：
1.额外标签法：w3c推荐的做法，在浮动元素的末尾添加新标签（清除浮动的样式）
优点:通俗移动，书写方便
缺点：添加了很多无意义的标签，结构化较差。 推荐的方法不接受
2.父级元素添加overflow属性:
overflow: auto;
优点：代码简介
缺点：内容增多时不会自动换行，无法显示需要溢出的元素
3.使用before和after伪元素清除浮动
.clearfix:before, .clearfix:after {
content: "";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
/*
*ie6,7能识别的符号，zoom ie6，7清除浮动的方法
*/
}
清除浮动：加上clear:both,使元素下移，直到两边没有浮动元素
闭合浮动：使浮动元素闭合，使父元素高度不在塌陷，这样减少了浮动带来的影响
优点：代码更加简介
缺点:ie6,7不支持:after,所以使用zoom清除浮动
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
