前言

从事前端工作三年来，对于div和css的用法，自己认为还是比较熟练的。但是对于一些概念性的东西，知之甚少，比如，今天看到有个BFC的概念，不知道CSS的BFC是啥意思。经过查阅资料，才知道这个概念。其实，虽然我们并不知道BFC是啥意思，因为在项目中，没有人会说什么BFC。但是我们在项目中经常用到BFC，每一个css布局基本上都会用到。为了消灭这一盲点，今天说一下什么是BFC吧。

BFC的概念

BFC全称Block Formatting Context ，直译“块级格式化上下文”，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我们用float和margin布局元素。

BFC布局引发的问题

关于BFC布局引发的问题，我之前在css常用效果总结中第10条就讲过用CSS的伪类处理的方法。今天再具体讲一讲。

首先

PHP截取字符串长度函数经常用到。超过一定的长度显示为"...."，当然，这个效果也可以用css样式控制，可以看我之前的一篇文章http://www.haorooms.com/post/css_common 第12条。今天主要说的是php的函数实现方法！

/*
 Utf-8、gb2312都支持的汉字截取函数
 cut_str(字符串, 截取长度, 开始长度, 编码);
 编码默认为 utf-8
 开始长度默认为 0
*/
function cutStr($string, $sublen, $start = 0, $code = 'UTF-8'){
    if($code == 'UTF-8'){
        $pa = "/[\x01-\x7f]|[\xc2-\xdf][\x80-\xbf]|\xe0[\xa0-\xbf][\x80-\xbf]|[\xe1-\xef][\x80-\xbf][\x80-\xbf]|\xf0[\x90-\xbf][\x80-\xbf][\x80-\xbf]|[\xf1-\xf7][\x80-\xbf][\x80-\xbf][\x80-\xbf]/";
        preg_match_all($pa, $string, $t_string);

        if(count($t_string[0]) - $start > $sublen) return join('', array_slice($t_string[0], $start, $sublen))."...";
        return join('', array_slice($t_string[0], $start, $sublen));
    }else{
        $start = $start*2;
        $sublen = $sublen*2;
        $strlen = strlen($string);
        $tmpstr = '';

        for($i=0; $i<$strlen; $i++){
            if($i>=$start && $i<($start+$sublen)){
                if(ord(substr($string, $i, 1))>129){
                    $tmpstr.= substr($string, $i, 2);
                }else{
                    $tmpstr.= substr($string, $i, 1);
                }
            }
            if(ord(substr($string, $i, 1))>129) $i++;
        }
        if(strlen($tmpstr)<$strlen ) $tmpstr.= "...";
        return $tmpstr;
    }
}

背景和需求

类似于我的前端导航，地址：http://www.haorooms.com/nav, 导航的左侧是分类，分类下面有很多链接。我现在想统计所有分类下面点击次数最多的一个，并把其颜色做特殊处理！

大致的数据结构如下：

{
    "content": [
        {
            "id": "1",
            "name": "htmldrive",
            "url": "http://www.htmldrive.net/",
            "cate": "前端开发",
            "clickpoint": "100"
        },
        {
            "id": "2",
            "name": "17素材网",
            "url": "http://www.17sucai.com/",
            "cate": "前端开发",
            "clickpoint": "151"
        },
        {
            "id": "3",
            "name": "阿里妈妈图标库",
            "url": "http://www.iconfont.cn/",
            "cate": "前端开发",
            "clickpoint": "2"
        },
        {
            "id": "53",
            "name": "Animate.css",
            "url": "http://www.haorooms.com/uploads/example/Animatecss/",
            "cate": "前端开发",
            "clickpoint": "21"
        },
        {
            "id": "55",
            "name": "Dafont",
            "url": "http://www.dafont.com/",
            "cate": "字体",
            "clickpoint": "1"
        }
 ]
}

今天在用bower安装依赖的时候，出现了Bower : ENOGIT git is not installed or not in the PATH ，这个错误提示很明显。就是git没有设置在环境变量中！