my blog my blog

Tag: web
CSS之使用clearfix清除浮动

 

好多东西,现用现学现查,然后记录下来,这几年都是这样子。看过很多东西,但是未必都记住了,有点儿印象,然后需要的时候再现学。今天分享下clearfix。

首先,奶牛直接copy下bootstrap里面的写法:

  1. .clearfix { 
  2.   *zoom: 1
  3.  
  4. .clearfix:before, 
  5. .clearfix:after { 
  6.   display: table; 
  7.   line-height0
  8.   content""
  9.  
  10. .clearfix:after { 
  11.   clearboth

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。

看到”闲聊CSS之关于clearfix–清除浮动“ (http://www.indievox.com/e2ghost/post/50238)的文章给了一个比较清晰的分析:

  1. 构成Block Formatting Context的方法有下面几种: 
  2.  
  3.     float的值不为none。 
  4.     overflow的值不为visible。 
  5.     display的值为table-cell, table-caption, inline-block中的任何一个。 
  6.     position的值不为relative和static。 
  7.  
  8. 很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。
  9. 因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不满足需求
  10. (会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。 
  11.  
  12. 我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
  13. 但是display: inline-block会产生多余空白,所以也排除掉。
  14. 剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
  15. 因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。
  16. 这样我们新的.clearfix就会闭合内部元素的浮动。 

这就是为什么选择display:table的原因。

最近做的一些事儿

 

开学到现在是第四周了,不得不说,时间真得好快,我还没太缓过来。

最近奶牛挺充实的,经常去图书馆,从开学到现在已经啃了两本书了,都还不错的,跟大家分享下:一本是《JavaScript DOM编程艺术》,一本是《java web 开发与应用》,第一本比较出名,第二本是郭克华主编的,在豆瓣上竟然我是第一个评论的,好吧,但是那书还不错,可以让你对jsp有个基本了解,基本可以用。

因为毕业设计做一个在线管理系统,所以要学一些后台的东西,但是主要方向又是用户界面,好吧,啥都要学,最近打算看mysql的书,初步定《mysql cookbook》这本吧,图书馆没有,下了电子书,看标价120真的舍不得哇,现在的书好贵。

前端的bootstrap最近也在用,发现人家框架虽好,但是不可能完全用人家的框架哇,很多东西还是要自己做修改的,还有很多css要自己搞定,很多效果要自己写js实现,不过有个框架确实挺好的,因为很多东西自己设计出来毕竟感觉不如人家那个大方。

周五是开题,看样子好像只是走个过场,好吧,那就走个过场吧,不必太紧张,一周前开题报告就准备出来了,就呼呼啦啦说说就可以了应该,对于那个在线系统的技术实现,奶牛没有太大压力,虽然很多东西都要重新学,但是看到同组的一些人连开发环境还没配置起来呢,我也就放心了。(不许偷笑)

最近看电影少了,估计是春天还挺冷吧,最近手一直比较冷,大学就是一个摧残生命的地儿,好多生活习惯真的来到大学就又回去了。好吧,反正只有两三个月了,就这么过吧。

明天是个特别的日子:3月28日,不解释。

最近看开了很多东西,感觉自己还是踏踏实实的学技术吧,总是觉得自己的底子不够结实,有很多要学的。回想下大学,好像折腾了不少东西,能拿得出手的却寥寥无几。

现在生活挺充实,看书写代码,吃饭睡觉,cs go基本可以戒了,没有大屏幕,没有不掉线的网络,找什么枪感哇,毕业第一件事儿就是给自己弄个显示器。

好吧,就扯淡这些吧,最近用了下git hub,好吧,确实挺好用的,只是我真心写代码不多,不是毕设,估计奶牛用github都不会太多。有空把自己的github的东东整理下。