我有一个包含2个div的页面.第一个浮动.第二个有一个"清晰:两个"CSS声明和一个大的上边距.但是,当我在Firefox或IE8中查看页面时,我没有看到上边距.看起来第二个div正在触及第一个div而不是被分开.有没有办法让最高保证金正常运作？
我已经阅读了CSS规范,并注意到它说"由于浮动不在流中,浮动框之前和之后创建的非定位块框垂直流动,就像浮动不存在一样.".但是,我不知道该怎么做.
这是一个例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>T. *_*one 34
您已正确识别问题.浮动<div>不再用于计算上边距,因此2 <div>只相互对接.解决这个问题的一个简单方法就是包装第二个<div>.这将允许包装器(无形地)与第一个对接<div>,并允许您为其指定空白区域.
让包装器正常工作的诀窍是让白色空间成为内部空白区域.换句话说,包装器使用填充而不是边距.这意味着包装器外面的任何东西(像其他浮动元素一样)都不重要.
<div style="float: left; border: solid red 1px">foo</div>
<div class="wrapper" style="clear: both; padding-top: 90px;">
<div style="border: solid red 1px">This div should not touch the other div.</div>
</div>小智 22
你可以简单地在它们之间添加一个div
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear:both;"></div>
<div style="margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
这应该照顾它.
很多WordPress主题(而不仅仅是)采用这种技术
小智 8
在第二个div:
float: none; display: inline-block;
浏览器兼容性表:http://caniuse.com/#feat=inline-block
<div>另一个答案几乎是正确的,但错过了一个width: 100%.这是更正后的版本.
h1 {
clear: both;
display: inline-block;
width: 100%;
}
没有这个清除width: 100%要么浮动元素要在一个标记良好的容器中,要么需要一个额外的,语义上空的<div>.相反,严格分离内容和标记需要严格的CSS解决方案来解决这个问题,即没有任何额外的非语义HTML.
一个人需要标记浮动结束的事实,不允许无人值守的排版.
如果后者是你的目标,浮动应该保持开放状态(段落,有序和无序列表等)以包裹它,直到遇到清除.在上面的示例中,clear由新标题设置.
当我的网站上广泛使用这个解决方案来解决问题,当浮动缩影旁边的文本很短并且下一个清算对象的上边距不受尊重时.当从站点自动生成PDF时,它还可以防止任何手动干预.
| 归档时间： |
|
| 查看次数： |
36468 次 |
| 最近记录： |