css 平时遇见CSS的一些小技巧不定添加

清除浮动的三种方法

1.使用clear 样式清除

样例：

.clear-float {clear:both;}

clear 属性是 CSS 1 就提供的用来清除浮动的样式，设置了 clear 属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，忽略其 margin-top 设置。这样，父容器高度未设定(值是 auto)时，由于定义的清理浮动样式元素所在位置处于浮动元素之下，容器计算后的实际高度就包含了浮动元素。

2.使用伪元素：after 清除

样例：.after-clear-float :after{content:””; display:block; clear:both;}

:after 伪元素是在 CSS 2 规范内提出的，IE 6/7 并不支持。它的作用是在指定该伪元素元素内，所有子元素最后自动生成一个伪元素，并可以为这个伪元素设定样式。在设定样式中，使用 clear 属性即可达到与手工添加元素指定清理的效果。

3.使用 overflow 清除

样例：

.overflow-clear-float {overflow:hidden;}

或者
.overflow-clear-float {overflow:auto;}

overflow 样式值为非visilbe 时，实际上是创建了CSS 2.1 规范定义的Block Formatting Contexts。创建了它的元素，会重新计算其内部元素位置，从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩，在 CSS 3 草案中被变更为名词Root Flow，顾名思义，是创建了一个新的根布局流，这个布局流是独立的，不影响其外部元素的。实际上，这个特性与早期IE 的hasLayout 特性十分相似。

注意兼容问题：

Block Formatting Contexts 概念是在CSS 2.1 规范内被提出。因此IE6/7 中并不被支持，这是由于之前的IE 版本仅完全实现了CSS 1 规范标准，以及一部分CSS 2.0 规范。

在IE 7 中，overflow 值为非visible 时，可以触发hasLayout 特性。这同样使得IE 7 同样可以使容器包含浮动元素。此部分详细内容可参考：RM8002: 不在IE6 IE7 IE8(Q) 中触发

4.使用 display:table 清除

样例：

.table-clear-float {display:table}

或者.table-clear-float {display:table-cell}

hasLayout 并在其他浏览器中创建Block Formatting Context 的元素在各浏览器中的表现会有差异

当元素display 值被设定为table 或table-cell 时，同样也创建了CSS 2.1 规范定义的Block Formatting Contexts。这样父容器也就包含了浮动元素高度。

注意兼容问题：

除去Block Formatting Contexts 在IE 6/7 中的兼容性外，display:talbe 系列样式设定也不在IE6/7 的支持范围之内。此部分详细内容可参考：RM8001:

各浏览器对'display' 特性值的支持程度不

5.当前激活的箭头

效果图：

代码：

1  border-right: 10px solid transparent;
2  border-bottom: 8px solid #E8E8E8;
3  border-left: 10px solid transparent;

View Code

完成可运行代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <style>
 8     /*箭头*/
 9     .emotions-text1{
10         position:absolute;
11         top:-8px;
12         left: 13px;
13         border-right: 10px solid transparent;
14         border-bottom: 8px solid #E8E8E8;
15         border-left: 10px solid transparent;
16     }
17     .emotions-text2{
18         position:absolute;
19         top:-6px;
20         left: 13px;
21         border-right: 10px solid transparent;
22         border-bottom: 8px solid #ffffff;
23         border-left: 10px solid transparent;
24     }
25     /*超链接*/
26     #link {
27         position: absolute;
28         left: 93px;
29         top: 35px;
30         min-height: 80px;
31         min-width: 300px;
32         font-size: 12px;
33         padding: 10px 20px 20px;
34         -webkit-border-radius: 5px;
35         -moz-border-radius: 5px;
36         border-radius: 5px;
37         display: block;
38         background: none repeat scroll 0 0 #ffffff;
39         border: 1px solid #e8e8e8;
40     }
41 </style>
42 <body>
43 <div id="link">
44     <span><i class="emotions-text1" style=""></i></span>
45     <span><i class="emotions-text2" style=""></i></span>
46 </div>
47 </body>
48 </html>

View Code

css 平时遇见CSS的一些小技巧 不定添加

css 平时遇见CSS的一些小技巧不定添加