...

原理： Html每一个标签前后都会存在前后节点::before、::after, 前后节点设置一个块状空元素来清空容器的浮动效果； 实现： <div class='clearfix'></div> //空 ...

/css"> /* 声明清除浮动的样式 */ .clearfix:after { content: " ...

1、清除浮动的原因 （1）不清除浮动的情况： 由于父级的子元素不方便给高度（不给高度的时候父盒子的大小由里面包含的子盒子来决定），但是，子元素为浮动的又不占有位置，导致父级的盒子高度为0的时候就会影响下面的标准流的盒子。 由于浮动元素不占有原来的文档流的位置 ...

使用方法： 优点： 代码更简洁 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。 代表网站： 小米、腾讯等 ...

利用伪元素:after清除浮动 让页面呈现多列布局时经常会使用 float:left/right ，可是浮动布局会导致父元素的高度为0（未设置高度的情况下），不会根据子元素的高度而变化，另外，后面不需要浮动想在下一行显示的标签出现在浮动元素的后面 ...

1.first-line伪元素：向文本的首行设置特殊格式； 注意：　只能用于块级元素；　 　　 　　可应用于first-line伪元素的属性：font,color,background，word-spacing，letter-spacing ...

今天偶然看到一个关于使用伪元素:before和:after清除浮动的问答，觉得很不错，特此记录一下。 原文出处：https://segmentfault.com/q/1010000000530778 先给出一个demo 由于父容器内有了浮动元素 div 的缘故，导致父容器 ...