css-float(浮动)详解
一，什么是浮动？
浮动(float)，是一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，因为浮动之后遗留下来太多的问题需要解决，特别是 IE6-7（以下无特殊说明均指 windows 平台的 IE 浏览器）。如果不详细了解浮动，可能会觉得它很神秘也很复杂，很多网站的效果好看，但是自己就是做不出来。
二，浮动元素的特点
- 浮动元素会脱离正常的文档流，不占据文档流中的空间，所以后面的元素会占据原本元素的空间，就是说后面的元素会被遮挡。
- 文字可以感知浮动元素，遇到浮动元素边框会避开。
- 浮动后的元素会处于同一层，并且依次排列。
- 如果有其他元素有清除浮动，同一层的浮动元素则会另起一行放置
三，浮动最常见的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.main {
height: 60px;
width: 50%;
background: lightblue;
}
.left {
float: left;
}
div {
padding: 15px 20px;
font-size: 14px;
color: #333;
}
.side {
height: 60px;
width: 20%;
background: #FFE3D7;
}
.wrap {
border: 1px solid blue;
width: 300px;
margin: 30px auto 5px;
background: #F5F5F5;
}
.footer {
border: 1px solid #ccc;
background: #EEE;
width: 300px;
margin: 5px auto 30px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="side left">
我是side
</div>
<div class="main left">
我是main
</div>
</div>
<div class="footer">
我是一个footer
</div>
</body>
</html>
可以发现两个问题：
- wrap 元素的高度无法正确覆盖住 main 和 side 元素。
- 由于 wrap 元素高度计算的问题，footer 元素本身显示的位置非常奇怪。
四，清除浮动与闭合浮动
闭合浮动：更确切的含义是使浮动元素闭合，使父元素高度不再塌陷，高度被撑开了，使父元素能够包围浮动元素，从而减少浮动带来的影响。
通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在 footer 上设置 clear：both 清除浮动并不能解决 wrap 高度塌陷的问题。
五，闭合浮动的方法
1,添加额外标签
通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>
3,父元素设置 overflow：hidden
4,父元素设置 overflow：auto
5,父元素也设置浮动
6,父元素设置 display:table
7,使用:after 伪元素
.wrap:after{
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
总结：
通过对比，我们不难发现，其实以上列举的方法，无非有两类：
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both 属性，after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者 display：table 属性来闭合浮动。
六，闭合浮动原理
触发 BFC Block formatting contexts（块级格式化上下文）
BFC 的特性：
1) 块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
2) 块级格式化上下文不会重叠浮动元素
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用。
3)块级格式化上下文通常可以包含浮动
通俗地来说：创建了 BFC 的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时 BFC 任然属于文档中的普通流。至此，你或许明白了为什么 overflow:hidden 或者 auto 可以闭合浮动了，这是因为父元素创建了新的 BFC。
那么如何触发 BFC 呢？（满足一下任一条件即可）
- float 除了 none 以外的值
- overflow 除了 visible 以外的值（hidden，auto，scroll ）
- display (table-cell，table-caption，inline-block)
- position（absolute，fixed）
- fieldset 元素
浙公网安备 33010602011771号