Html 为什么我的页脚背景色不';不行?

Html 为什么我的页脚背景色不';不行?,html,css,Html,Css,#页脚{ 背景色:#B40404; } #左脚{ 背景色:#B40404; 填充:20px; 浮动:左; 宽度:30%; 文本对齐:左对齐; } #左跨距{ 文字装饰:无; 显示:表格; 颜色:#F79F81; } #左跨a{ 文字装饰:无; 颜色:#F79F81; } #页脚左跨a:悬停{ 文字装饰:无; 颜色:#FF0000; } #右脚{ 背景色:#B40404; 浮动:对; 填充:20px; 宽度:30%; } #页脚右跨{ 填充物:5px; 文字装饰:无; 显示:表格; 颜色:#F79

#页脚{
背景色:#B40404;
}
#左脚{
背景色:#B40404;
填充:20px;
浮动:左;
宽度:30%;
文本对齐:左对齐;
}
#左跨距{
文字装饰:无;
显示:表格;
颜色:#F79F81;
}
#左跨a{
文字装饰:无;
颜色:#F79F81;
}
#页脚左跨a:悬停{
文字装饰:无;
颜色:#FF0000;
}
#右脚{
背景色:#B40404;
浮动:对;
填充:20px;
宽度:30%;
}
#页脚右跨{
填充物:5px;
文字装饰:无;
显示:表格;
颜色:#F79F81;
}
#右跨距a{
文字装饰:无;
颜色:#F79F81;
}

电话:0714412882
电邮:
地址:昆士兰州4101西区墨尔本街17号8楼。
营业时间:上午9时至下午4时
不应用
#页脚
背景,因为
#页脚
元素本身的高度为
0
,因为它只有浮动内容

解决方案是确保内容能够使其增长:

#footer{
    background-color:#B40404;
    overflow: auto;
}
由于
#footer
元素本身的高度为
0
,因此不应用
#footer
背景,因为它只有浮动内容

解决方案是确保内容能够使其增长:

#footer{
    background-color:#B40404;
    overflow: auto;
}

使用clearfix

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}
*{
填充:0;
保证金:0;
}
.clearfix{
*缩放:1;
}
.clearfix:之前,
.clearfix:之后{
显示:表格;
线高:0;
内容:“;
}
.clearfix:之后{
明确:两者皆有;
}
#页脚{
背景色:#B40404;
宽度:100%;
}
#左脚{
背景色:#B40404;
填充:20px;
浮动:左;
宽度:30%;
文本对齐:左对齐;
}
#左跨距{
文字装饰:无;
显示:表格;
颜色:#F79F81;
}
#左跨a{
文字装饰:无;
颜色:#F79F81;
}
#页脚左跨a:悬停{
文字装饰:无;
颜色:#FF0000;
}
#右脚{
背景色:#B40404;
浮动:对;
填充:20px;
宽度:30%;
}
#页脚右跨{
填充物:5px;
文字装饰:无;
显示:表格;
颜色:#F79F81;
}
#右跨距a{
文字装饰:无;
颜色:#F79F81;
}

电话:0714412882
电邮:
地址:昆士兰州4101西区墨尔本街17号8楼。
营业时间:上午9时至下午4时

使用clearfix

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}
*{
填充:0;
保证金:0;
}
.clearfix{
*缩放:1;
}
.clearfix:之前,
.clearfix:之后{
显示:表格;
线高:0;
内容:“;
}
.clearfix:之后{
明确:两者皆有;
}
#页脚{
背景色:#B40404;
宽度:100%;
}
#左脚{
背景色:#B40404;
填充:20px;
浮动:左;
宽度:30%;
文本对齐:左对齐;
}
#左跨距{
文字装饰:无;
显示:表格;
颜色:#F79F81;
}
#左跨a{
文字装饰:无;
颜色:#F79F81;
}
#页脚左跨a:悬停{
文字装饰:无;
颜色:#FF0000;
}
#右脚{
背景色:#B40404;
浮动:对;
填充:20px;
宽度:30%;
}
#页脚右跨{
填充物:5px;
文字装饰:无;
显示:表格;
颜色:#F79F81;
}
#右跨距a{
文字装饰:无;
颜色:#F79F81;
}

电话:0714412882
电邮:
地址:昆士兰州4101西区墨尔本街17号8楼。
营业时间:上午9时至下午4时

您能创建一个JSFIDLE吗?-还有,你想做什么?这是工作,你没有身高。尝试给出一个高度,你会看到一个背景色……但正如有人问的那样:你到底想要实现什么?你必须清除页脚中的浮动元素。你能创建一个JSFIDLE吗还有,你想做什么?这是工作,你没有身高。试着给一个高度,你会看到一个背景色…但正如被问到的:你到底想要实现什么?你必须清除页脚中的浮动元素