<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>Run Code Online (Sandbox Code Playgroud)
为什么margin:top"主要数据"在上面的代码中不起作用?
我有一个包含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>Run Code Online (Sandbox Code Playgroud)