CSS clearfix
2015-07-03 09:49
525 查看
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:
{clear: both;}
clearfix
Once you understand what is happening, use the method below to “clearfix” it.
{clear: both;}
clearfix
Once you understand what is happening, use the method below to “clearfix” it.
Source code for webtoolkit.clearfix.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } |
相关文章推荐
- CSS分层
- 布局标签和样式表的选择器
- 关于css三角形的制作
- CSS3小分队——text分身text-shadow
- css 实现三角形 实现过程
- 下拉菜单之纯CSS实现
- chart.css
- CSS2与CSS3布局方式比较
- 深入理解CSS中的属性模块
- CSS3背景渐变效果
- css实现tip popup
- 纯CSS设置Checkbox复选框控件的样式
- css3 shape-out
- 理解CSS居中
- css3 gradient 详解
- 博客园自定义设计(三)用css3自定义标签样式
- table表格某一td内容太多导致样式混乱的解决方案
- CSS3 禁用文本复制的属性:user-select
- CSS3 禁用文本复制的属性:user-select
- button样式