浮动的概念
元素脱离文档流，沿父元素的左侧或右侧放置，文本和内联元素环绕它。
特征：
- 脱离文档，不影响普通元素布局。
- 可以内联排列，类似inline-block，多个浮动元素，高度不一致，会卡住。
- 导致父元素高度塌陷。
清除浮动
- clear：该属性不允许被清除浮动的元素的左侧/右侧挨着浮动元素，在被清除浮动的元素上边或下边添加足够的清除空间。在别的元素上使用clear，不是在浮动元素上。
1
2
3
4
5
6
7
8
9
10<style>
.box{
float: left;
}
</style>
<div class="box-wrapper">
<div class="box"> </div>
<div class="box"> </div>
<div style="clear:both;">不在浮动元素上清除浮动 </div>
</div>
clear方式的完整代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31// 不支持IE6、7
.clearfix:after{
display: table;
content: ' ';
clear:both;
}
// 引入zoom支持IE6、7
.clearfix{
*zoom: 1;
}
// 加入:before解决现代浏览器上边距折叠问题
.clearfix:before{
display: table;
content: ' ';
clear:both;
}
// 完整clearfix方案
.clearfix:before,
.clearfix:after{
display: table;
content: ' ';
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
- BFC清除浮动
为父元素添加下列属性：
- float: left | right
- overflow: hidden(更好兼容IE) | auto | scorll
- display:table-cell | table-caption | inline-block | flex | inline-flex
- position:absolute | fixed
浮动的适用场景
- 文字环绕
- 多列布局
- 多个元素内联排列