css完美3等分 |css hover 过渡效果

.third {
width: 33.33%;
float: left;
box-sizing: border-box;
}

代码实现非常简单，大家创建一个类名叫作third，然后设置其宽度为33.33%，同时将其浮动到左侧，最后通过便捷盒模型（box-sizing）属性消除边框的影响，这样三个等分就能在不发生任何问题的情况下完整地放置在同一行中。

需要注意的是，在使用float属性时一定要清除浮动，否则容易造成布局错乱。这里推荐两种清除浮动的方式：

.clearfix:after {
content: '';
display: table;
clear: both;
}

.parent {
overflow: hidden;
}

在上面的两种方式中，第一种方法比较常用，大家给父元素添加一个clearfix类名，然后设置其after伪元素，利用clear:both清除浮动即可。第二种方式则是给父元素添加overflow:hidden来清除浮动，这种方式主要是利用了overflow属性使父元素具备了包含子元素的属性，从而清除了浮动。

总之，使用CSS实现完美3等分并不难，只需要遵守一定的规则并合理运用相关的属性即可。希望以上内容能对大家有所帮助。