在CSS中，我们经常使用clear属性来解决浮动元素带来的布局问题。但是有时候，我们也会遇到clear属性不适用的情况。
/* 被clear错过的情况 */
.Box {
width: 200px;
height: 100px;
float: left;
}
.clearfix {
clear: left;
background-color: #ccc;
}
如上代码所示，我们给一个浮动元素添加了一个clearfix类，使用clear：left属性让clearfix的高度能够包含浮动元素。但是，实际效果是clearfix的高度并没有包含浮动元素，我们添加的背景颜色也没有显示出来。
为什么会出现这种情况呢？其实，这是因为浮动元素的包裹盒子造成的，也就是clearfix类所在的父元素没有设置高度，而CSS默认是不会把父元素的高度撑起来的。
/* 解决方案 */
.Box {
width:200px;
height:100px;
float:left;
}
.parent {
display:inline-block;
/*或者使用float:left;*/
}
.clearfix {
clear:left;
background-color:#ccc;
}
我们可以在clearfix的父元素中添加一个display：inline-block或者float：left的属性，让它按照块级元素来展示，会让父元素的高度被撑起来，从而实现我们的效果。
当然，如果父元素不是一个流式布局，例如position：absolute或者display：table，我们就需要通过其他方法来解决这个问题了。但是，我们需要明白的是，CSS的表现与效果，永远不是单一属性的作用，而是一系列因素的综合作用。所以，在实现适合自己的布局效果的时候，我们需要谨慎地考虑各种因素，才能让我们的网页设计更完美。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
