什么是浮动？
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
为什么需要浮动？
很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素默认的排列方式
浮动的特性
一：浮动元素会脱离标准流
1. 脱离标准普通流的控制（浮）移动到指定位置（动）
2. 浮动的盒子不再保留原先的位置
设置两个div，分别为300X300的蓝盒子和200X200的粉盒子，默认情况下纵向排列，如下图所示：
当我们给粉盒子添加 float：left属性后，它会脱离标准流的控制，显示在普通流的上方（蓝盒子），如下图所示：
二：浮动的元素会一行内显示并且元素顶部对齐
1. 在一行显示时，所有div都要设置浮动属性
2. 浮动的元素是相互贴在一起的，不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐
设置三个大小不一的盒子，分别给都他们添加上 float：left，如下图所示：
三：浮动的元素会具有行内块元素的特性
1. 任何元素都可以添加浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨在一起的
- 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度
设置三个没有宽高的盒子，效果如下图所示：
对三个盒子都设置浮动，效果如下图所示：
浮动带来什么影响？
我们在设计页面时通常需要对盒子进行横向排列布局，这时就需要靠浮动来完成，而在设计网页布局时我们一般不指定高度，因为我们不确定内容具体有多少，不方便给一个高度，不然盒子会装不下我们所需要的内容。
因此，最好的状态就是让子盒子撑开父盒子。
但是我们不给父盒子高度又会出现一些问题。
我们设置两个大小、颜色不一盒子，再用一个box大盒子框起来，但是不给其添加高度，效果如下图所示：
两个盒子没有添加浮动，外面的大盒子包裹着两个小盒子，纵向排列着，并紧贴着边框左边。
我们现在让两个盒子左右排列，给其添加浮动后，效果如下图所示：
两个小盒子添加浮动后在一行显示，左右并排着，但是父元素的高度没有了，因为浮动的元素是不占有位置的，而父元素是标准流，它检测不到自己的子元素，那么它的高度就变成了0.
如果在大盒子后面还有盒子，这个盒子也是标准流，效果如下图所示：
后面的盒子跑到了两个小盒子下面，因为两个小盒子的父元素没有高度，所以就出现了这种情况。
所以在我们不方便给父元素高度时，又对子元素设置了浮动，并且浮动的子元素又不占有高度，那么就会对后面的标准流产生影响，我们就需要清除浮动。
清除浮动
清除浮动的本质就是清除浮动元素造成的影响。
注意：
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响后面的标准流了。
清除浮动的方法
1. 额外标签法也称隔墙法
在浮动标签末尾添加一个空的标签
注：新添加的标签必须是块级元素，不能是行内元素
代码如下：
<style>
.box {
margin: 0 auto;
width: 700px;
border: 1px solid brown;
}
.box1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: skyblue;
float: left;
}
.box3 {
height: 200px;
background-color: palegoldenrod;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">one</div>
<div class="box2">two</div>
<!-- 隔墙法 -->
<div class="clear"></div>
</div>
<div class="box3"></div>
</body>效果如下：
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
2. 父级添加overflow属性
可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
效果如下：
优点：代码简洁
缺点：无法显示溢出的部分
3. 父级添加after伪元素
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
} 效果如下：
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
4. 父级添加双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
} 效果如下：
优点：代码更简洁
缺点：照顾低版本浏览器
636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
