div+css问题

2025-03-06 03:29:04

推荐回答（1个）

回答1：

你这问题应该是浮动造成的。
当一个元素内所有元素都是浮动（float）时，这个元素的高（height）就没有了。

你这个例子中
header是一个元素，header里面的元素float浮动时，那header就会没有高度height，所以不会显示header的背景图片。删除header里的元素float浮动后就有了。

为什么加入.header2的css时，header的背景图片又有了呢？
因为.header2的css在header元素内，并且做了clear:both来清除所有浮动。所以header的背景图片又出现了。

原因就是在这里。

那么以后如何避免？
当某个元素内全部是float浮动时，在这个元素内快结束的最后面加一个清除浮动的空元素来清除浮动，如下：

也有一个专门用来清除浮动的clear fix，代码如下：
/* Clear Fix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
display: block;
}
/* End hide from IE Mac */
/* end of clearfix */

如何要清除header里面元素的浮动，只要给header加一个class="clearfix"就可以了。像下面这样：