I''m waking up to ash and dust, I wipe my brow and I sweat my rust, I''m breathing in, the chemicals, gahh ahhh. I''m breaking in, shaping up, then checking out on the prison bus. This is it, the apocalypse, woah. I''m waking up, I feel it in my bones Enough to make my systems go Welcome to the new age, to the new age. Welcome to the new age, to the new age. Woah, woah, I''m radioactive, radioactive. Woah, woah, I''m radioactive, radioactive. I raise my flag and dye my clothes, It''s a revolution I suppose. We''re painted red, to fit right in, woah. I''m breaking in, shaping up, then checking out on the prison bus. This is it, the apocalypse, woah. I''m waking up, I feel it in my bones Enough to make my systems go Welcome to the new age, to the new age. Welcome to the new age, to the new age. Woah, woah, I''m radioactive, radioactive. Woah, woah, I''m radioactive, radioactive. All systems go, sun hasn''t died. Deep in my bones, straight from inside. I''m waking up, I feel it in my bones Enough to make my systems go Welcome to the new age, to the new age. Welcome to the new age, to the new age. Woah, woah, I''m radioactive, radioactive. Woah, woah, I''m radioactive, radioactive.

好久没有写过技术文章了,最近回顾起以前的老知识,感觉都忘掉好多了
这回来记录一下一个凡是做网页就一定会遇到的问题吧
平时做网页处理排版的时候,经常会使用到 css 的浮动功能
但是浮动一直以来都有一个很麻烦的问题,就是元素一旦浮动就会脱离文档流
这是它的缺点,也是它的优点,为什么这么说呢?
它的缺点就缺在于在排版时会增加排版的难度
有时候需要父元素始终包裹住子元素,但是float脱离文档流之后父元素就不能直接包裹住子元素了
就像这样

相比 display: inline-block 它却有一个好处, 用过 inline-block 的都知道,行内块元素属于文档内节点,不脱离文档流
但是随之而来的,不脱离文档流的的情况下就很容易发生这种问题

就是一旦代码中存在换行,制表符,这些东西的话,就会被当成空白节点处理,两个元素之间总会有一个莫名其妙的间距
而 float 出来的元素就可以不用考虑空白符节点的问题
所以我还是选择了 float,那么接下来要解决的问题就是怎么让父元素包裹住float的元素了
现在最主流的办法就是使用 css 的 clearfix 类,就是在父元素标签的 class 属性中添加 clearfix,类似这样

<div class="clearfix"></div>

然后clearfix的写法有好多种,这里记三种常用一点的,都可以兼容 IE6 的


第一种:overflow:auto

.clearfix {
  overflow: auto;
  zoom: 1;
}

第二种:使用 after 伪元素

.clearfix:after { 
    content:"\200B"; 
    display:block; 
    height:0; 
    clear:both; 
} 
.clearfix {*zoom:1;}/*IE/7/6*/


第三种:display:table 与 clear:both 联用

.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;} 
.clearfix{ 
    *zoom:1;/*IE/7/6*/
}


这样子就可以实现让父元素包裹住浮动的子元素了


参考资料:

解读浮动闭合最佳方案:clearfix

CSS - 清除浮动(clearfix hack)

What methods of ‘clearfix’ can I use?

clearfix清除浮动进化史