在工作学习中总能发现一些新鲜的页面效果可以用不同的css完成，在这里将遇到的一些css做下记录，以便日后翻阅，如果其中的写法不对，或者有更优写法欢迎留言，不胜感激
1.关于用一个div做出双边框(由于outline-offset在ie下不被支持，所以该方法不支持IE)
html/css 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
#outline {
width: 84px;
height: 84px;
border: 1px solid blue;
outline: 1px solid brown;
outline-offset: 5px;
}
</style>
</head>
<body>
<div id="outline">outlie实现多重边框</div>
</body> </html>
效果图：
其中：outline: 宽 样式 颜色 ；有这三个属性 （想了解ouline具体属性建议查看：http://www.runoob.com/cssref/pr-outline.html）
使用outline制作外层边框之后记得使用margin将外层轮廓覆盖，因为轮廓是不占空间布局的，也就不会影响到元素的尺寸，
outline-offset: 2px ； 是相对于border的偏移量 值为正数则向外便宜如图，反之内偏移
2.清除浮动的方法集
1.第一种最为直接明了（但只能兼容IE8开始）在ie7以下需要利用 zoom 来达到清除浮动的目的，zoom该方法为IE的专有属性（可设置缩放），最重要的是可触发ie的haslayout属性，用于清除浮动造成的高度塌陷，margin重叠问题，（该属性在火狐下不被支持，webkit内核浏览器下也是可以适用的）
<!doctype html>
<!--[if IE 7]><html class="ie7"><![endif]-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none ;
}
.fbc li{
float: left ;
}
/* 用于清除浮动带来的塌陷影响 在ie8开始兼容*/
.clearboth:after{
content: '' ;
display: block ;
visibility: hidden ;
clear: both ;
}
/*为兼容IE7以下 我们需利用一下zoom*/
.ie7 .zoom{
zoom:1;
}
</style>
</head> <body>
<ul class="fbc clearboth zoom">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<span>应该换行</span>
</body>
</html>
2.第二种利用css的BFC规则来清除浮动（该方法兼容性最好，若要兼容ie7以下建议使用符合规则的css2属性即可）
BFC顾名思义（块级格式上下文），其规定内部核模型如何布局，且这个区域不会影响到外部
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC?
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none ;
}
.fbc{
/* display: table-cell ; */
overflow: hidden ;
}
.fbc li{
float: left ;
}
</style>
</head>
<body>
<ul class="fbc ">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<span>应该换行</span>
</body>
</html>