深入解析clearfix及其作用
1. 首先新建一个html文件 clearfix，命名为testhtml。
2. 在testhtml文件中 clearfix，分别给两个p标签设置class属性 clearfix，分别为n1，n2。主要用于下面分别对p标签使用line-height和height样式，讲解它们 clearfix 的区别。
3. 为了展示明显的效果，在css标签内，使用css设置p标签的样式，定义p元素为1px灰色边框，宽度为300px，并使用。
关于clearfix类，clearfix这个很多人还不知道，今天来为大家解答以上的问题，现在让 clearfix 我们一起来看看吧。
1. 自设class名。
2. 一般约定俗成的是清除浮动。
3. clearfix { overflow: hidden; clear: both; width: 0; }
HTML部分：
盒子1 盒子2
CSS部分：
box1 { float: left; } box2 { float: left; }
使用float属性可以使两个div在同一行显示，但可能会出现清除浮动的问题，这时可以使用clearfix方法解决。具体的clearfix代码如下：
CSS部分：
.clearfix:after { content: ""; display: table; clear: both; }
这段代码的主要作用是清除浮动。具体来说，它通过在类名为“clearfix”的元素内加入一个空的伪元素来实现清除浮动的效果。伪元素的代码如下：
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size: 0; }
通过上述代码，伪元素被插入。
相关标签 :
