前端开发之清浮动（BFC）
2017-10-28 本文已影响18人
_Joeyoung_
BFC就是清浮动，用来处理浮动元素脱离文档流的问题。
今天在此记录下清理浮动的几种方法，对前端开发中浮动不清楚的可以戳这里。
先总结下浮动的几大特性：
浮动的特性：
1.浮动的元素排在同一排
2.浮动的元素内容撑开宽度
3.浮动的元素支持所有css样式
4.浮动的元素脱离文档流
5.浮动的元素提升层级半级
以下列举清浮动的六种方法：
先演示下浮动的代码：
<style>
#box1 {
width: 540px;
border: 10px solid red;
margin: 0 auto;
}
span {
width: 100px;
height: 100px;
border: 4px solid blue;
text-align: center;
line-height: 100px;
float: left;
}
</style>
<body>
<div id="box1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
浮动导致span脱离文档流，div包不住子元素span了。
方法一：父级也浮动
//给父类元素添加也浮动
#box1{float: left;}
不建议用，页面复杂的情况下要给所有父级元素都添加浮动，不现实
弊端：
左右的 margin:0 auto; 布局会失效。
方法二:父级加display: inline-block;
#box1{display: inline-block;}
弊端：
同上，左右的 margin:0 auto; 布局会失效。
如果需要让元素居中，可以给#box1标签的父级即<body>加text-align: center;。
方法三：父级加height
#box1{height：108px;}
弊端：
不易拓展，假如子类元素又添加新元素，还要从新计算父级元素高度。
方法四：在父元素的末尾添加<br clear="all">子标签
<div id="box1">
...
<br clear="all">
</div>
弊端：
不符合W3C规范：结构、行为、样式三者分离。
方法五：在父元素末尾添加子标签，给该子标签添加clear
//在<style>中
#sun{
clear: both;
}
//在<body>中
<div id="box1">
...
<div id="sun"></div>
</div>
弊端：
同上，不符合W3C规范：结构、行为、样式三者分离。
方法六：伪类清浮动
//在<style>中
#box1:after{
content: "";display: block;clear: both;
}
弊端：无
推荐使用该方法清浮动，主流。
//可以在公用的<style>中定义，
//需要清浮动的元素只需要添加类 class = "clear" 就能清除浮动
.clear:after{
content: "";display: block;clear: both;
}
//解决兼容性问题
clear{
zoom:1;
}
千里之行，始于足下~
