CSS响应-清除两者后，div药丸向上/堆栈而不是恢复正常。
CSS响应-清除两者后，div药丸向上/堆栈而不是恢复正常。
提问于 2016-12-01 04:00:14
我试着学习响应性网站。但我被困在这里
div {
display: block;
height: 50px;
}
.header {
width: 50%;
background-color: red;
}
.left {
background-color: green;
float: left;
width: 50%;
}
.right {
background-color: blue;
float: left;
width : 50%;
}
.clear {
display: none;
clear: both;
}
.footer {
width: 50%;
background-color: yellow;
}<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
</head>
<body style="width: 100%">
<div class="header">without float</div>
<div class="header">without float</div>
<div class="left">kiri</div>
<div class="right">kanan</div>
<div class="clear"></div>
<div class="footer">after clear xxxxxxxxxx xxxxxx</div>
<div class="footer">after clear shshjsjaa shsusus</div>
</body>
</html>
为什么div类页脚不能像类头一样恢复正常呢？
正如我所知:两者都清楚:左边是擦除浮点:左规则。但我不知道为什么我的脚看上去很吃力
查找此图像以查看显示
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-12-01 04:05:13
您不应该添加"Display:none;“加上”清空:两者“。这使得div被隐藏了。
Stack Overflow用户
发布于 2016-12-01 04:34:43
你不需要一个单独的分区，在那里的课是透明的。
检查一下这个片段
div {
display: block;
height: 50px;
}
.header {
width: 50%;
background-color: red;
}
.left {
background-color: green;
float: left;
width: 50%;
}
.right {
background-color: blue;
float: left;
width: 50%;
}
.footer {
width: 50%;
background-color: yellow;
clear:both;
}<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
</style>
</head>
<body style="width: 100%">
<div class="header">without float</div>
<div class="header">without float</div>
<div class="left">kiri</div>
<div class="right">kanan</div>
<div class="footer">after clear xxxxxxxxxx xxxxxx</div>
<div class="footer">after clear shshjsjaa shsusus</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40902413
复制相关文章
相似问题
腾讯云开发者
