为什么在浮动元素后会忽略html元素的上边距？

小编典典

为什么在浮动元素后会忽略html元素的上边距？

html

我有一个包含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>

阅读 277

2020-05-10

共1个答案

小编典典

您已正确找出问题所在。float<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>

2020-05-10