当前位置: 首页 > 面试题库 >

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

东方俊杰
2023-03-14
问题内容

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

问题答案:

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


 类似资料:
  • 问题内容: 我有一个( 父 )包含另一个( 子 )。Parent是第一个没有特定CSS样式的元素。当我设定 最终结果是我的孩子的顶部仍然与父母对齐。我的父母没有将孩子向下移动10px,而是将其向下移动10px。 我的设定为。 我在这里想念什么? 编辑1 我的父母需要具有严格定义的尺寸,因为它的背景必须从上到下显示(像素完美)。因此,在其上设置垂直边距是 不可行的 。 编辑2 此行为在FF,IE和C

  • 问题内容: 假设您有一个,给它一个定值,然后在其中添加元素,在我的情况下为另一个。 这个想法是容器的内容将导致容器伸展,并成为内容的背景。但是,当我这样做时,包含的对象会缩小以适合非漂浮的对象,并且漂浮的对象将要么全部伸出,要么一半伸出,一半进入,并且对big的大小没有任何影响。 为什么是这样?有什么我想念的东西,怎么才能让漂浮的物品伸出其中的东西呢? 问题答案: 最简单的方法是放在父div上,而

  • 问题内容: 我只在div中遇到浮动元素问题,这是问题所在: 我需要有关第二个DIV的边框及其内容位置的说明。为什么边框在后面但内容在第一格之下? 还根据:https : //css-tricks.com/all-about-floats/#article-header-id-3 关于浮点数的更令人困惑的事情之一是它们如何影响包含它们的元素(它们的“父”元素)。如果此父元素只包含浮点元素,则其高度实

  • 问题内容: HTML中是否有任何方法告诉浏览器不允许对特定元素进行标签索引? 在我的页面上,尽管有一个用jQuery呈现的杂耍,但是当您通过Tab进行制表时,您会在按下Tab控件移动到页面上的下一个可见链接之前获得大量的制表符按下,因为所有通过制表的内容都被隐藏了。视觉上的用户。 问题答案: 您可以使用。 W3C HTML5规范支持负的值: 如果值为负整数 ,则用户代理必须设置元素的tabinde

  • 问题内容: 如果我有三个向右浮动的元素,那么为什么顺序跟随(请参阅jsfiddle),而元素3实际上是最后一个元素,则元素1是右侧的第一个元素。 现在订购 但是元素在html中按此顺序 为什么? 问题答案: 这种“倒序”是预期的结果。 您可以根据需要在CSS规范中进行深入研究,但是示例将按原样进行渲染。 如果您希望它们以与标记相同的顺序显示,请向右浮动,其子项向左浮动。

  • CSS开发人员可能经常会碰到的一个现象是,一个页面在IE(特别是老版本的IE)中显示正常,而在现代浏览器中却完全变形了,或者情况完全相反。 常常能听到有人抱怨:“在IE上开发时间中,超过 60% 的时间,都是在与IE的Bug作斗争。”导致这一现象的根本原因,是不知道IE都有哪些 bug,也不知道如何解决这些 bug。在出现问题时,往往束手无措,更不要说预防 Bug 了。 因此,作为一位优秀的CSS