html - 如何摆脱 float 上方的上边距？-6ren

html - 如何摆脱 float 上方的上边距？

转载作者：太空宇宙更新时间：2023-11-04 14:00:08

25

4

我正在尝试修复现有 HTML/CSS 中的边距(使用 CSS 覆盖修复)，但我无法理解我正在处理的案例(归结为以下代码)。

我想要的是:第一个“div.floating”上方没有填充(出于某种原因来自“p.par”的填充 - 为什么？)。让我感到困惑的是:如果我删除 div#extra(或者如果 '.floating-column' 不是 float 的)，填充就会消失。为什么？是否存在超出我理解范围的折叠边距规则？

(另外，更改 HTML 不是一种选择。)

感谢帮助，曼努埃拉

ps:代码:

<!DOCTYPE html>
<html>
<head>
  <style>
html, body, div, p {
  border:0;
  margin:0;
  padding:0;
}

.container {
  width:960px;
  margin:0 auto;
  background-color: #ddd;
}
.container:after {
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.floating-column {
    float:left;
    border: 1px dashed green;
}

.floating {
  width: 100%;
  float: left;
  border: 1px dotted black;
}

.par {
  margin: 10px;
  border: 1px solid red;
}
  </style>
</head>
<body>
  <div class="container">
    <div class="floating-column">
      <div id="extra">
        <div class="floating">first float</div>
        <div class="floating">another float</div>

        <p class="par">Cras nibh erat, tempor non sagittis ac, vulputate ac lectus. Praesent sed fermentum eros. Mauris sodales suscipit diam, a congue dui commodo ac. Sed convallis rutrum ligula, vitae sollicitudin nisl porttitor nec. Mauris tempor fringilla imperdiet. Pellentesque interdum, tellus nec venenatis venenatis, nisi nulla ultricies leo, tincidunt venenatis risus nisl ac dolor. Donec ante leo, elementum et faucibus tincidunt, dignissim lacinia libero. Suspendisse pharetra in augue in sodales. Etiam luctus dui blandit nisi dictum pretium.</p>
      </div>
    </div>
  </div>
</body>
</html>

最佳答案

将 clear:both css 属性添加到 p.par，例如:

.par {
  margin: 10px;
  border: 1px solid red;
  clear: both;
  display: inline-block;
}

它将清除div.floating 的float，否则它将从容器的顶部获取它的边距。

在这里查看 DEMO .

关于html - 如何摆脱 float 上方的上边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21578267/

25

4

0

文章推荐： c++ - 将 -m32 参数添加到 Makefile 命令

文章推荐： C++ mciSendString 设置音频错误

文章推荐： jquery - 在全屏上更改 css 值

R:摆脱 for 循环和加速代码
我想在不使用函数 m 中的循环的情况下加快计算并获得结果.可重现的例子: N require(rbenchmark) > benchmark(m(r, N), + m1(r, N
crud - 摆脱 CRUD
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
cython - 摆脱 pyximport
我正在尝试使用 Cython。我使用 setup.py 并构建，而不是让 pyximport 执行此操作。但是，每次我导入模块时，似乎都会调用 pyximport 。 Pyximport 构建失败，一
Java - 摆脱 NullPointerException
考虑两个案例 case1 和 case2 以及两个方法 method1 和 method2。假设方法 1 解决案例 1，方法 2 解决案例 2。现在，我有一个程序可能以 case1 或 case2 结
c# - 摆脱 CA2202
我怎样才能摆脱 CA2202 警告(CA2202:Microsoft.Usage:对象“compressedStream”可以在方法“Compression.InternalDecompress(by
java - 摆脱 NP_NULL_ON_SOME_PATH_FROM_RETURN_VALUE？
我在这段代码中得到 NP_NULL_ON_SOME_PATH_FROM_RETURN_VALUE final Integer id = Ints.tryParse(idString); FailRea
java - 摆脱
我的 eclipse 中有 Java WebService 代码。我用过@WebService @Webmethod、@XmlElements、@XmlType、@XmlAccessorType 现在
java - 摆脱 `instanceof`
在我正在编写的基于 Sprite 的游戏中，二维网格中的每个字段都包含一堆 Sprite 。大多数情况下，最重要的是最重要的。在游戏的规则模块中，我有很多这样的代码: public boolean
java - 摆脱 if/else
在 Java 中，我必须设置一个带有值的 POJO 类。然而，要决定使用哪个 setter 函数，我必须取决于 if 条件。我当前的代码如下所示: // Code written in a funct
java - 摆脱 Optional [] 字符串？
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭去年。 Improve this
c++ - 摆脱 C++ 中令人讨厌的函数类型的可能方法？
所以我最近接触到了C++中所谓“令人厌恶的函数类型”的怪诞之处(据我所知源自这篇论文: https://www.open-std.org/jtc1/sc22/wg21/docs/papers/2015
qt - 摆脱 QScrollArea 中不必要的滚动条
我正在研究配置 QDialog。它有几个类别(General、Appearance 等)，当用户点击它们时会加载它们。每个类别都有自己的页面。这些页面本身就是独立的类(每个都有自己的 ui、cpp 和
vb.net - 摆脱 `My` 命名空间
我一直在开发 Vb.Net应用程序最近，我试图使它尽可能轻量级(即，使二进制文件尽可能小)。我已经完成了所有琐碎的工作，但是在使用 ILDasm 浏览二进制文件时，我注意到它有一个 My names
scala - 摆脱 sbt 生成的所有内容的艰难方法
An easy way to get rid of *everything* generated by SBT?要求一个简单的方法来清理从 sbt 生成的所有文件，但没有找到。我会要求一个艰难的。我如
antlr4 - 摆脱 token 识别错误
如何摆脱默认的 ANTLR 识别错误？我想用我自己的错误类而不是 ANTLR 的错误来写另一条消息。我的意思是是否有可能扩展某些 ANTLR 错误类以显示我自己的消息？更清楚地说，我不想在控制台
php - 摆脱 Woocommerce 订单查询
使用 woocommerce 的订单面板时，我注意到使用搜索执行了不必要的查询。这是对 Woocommerce 文件(/includes/data-stores/class-wc-order-data
r - 摆脱 R 中具有重复属性的行
我有一个包含列的大数据框，例如: ID, time, OS, IP 该数据帧的每一行对应一个条目。在某些 ID 的数据框中，存在多个条目(行)。我想摆脱那些多行(显然，对于相同的 ID，其他属性会有所
objective-c - 摆脱“由于设置了OBJC_DISABLE_GC而强制关闭GC”
当我运行测试时，我得到如下代码： objc[8845]: GC: forcing GC OFF because OBJC_DISABLE_GC is set 它还会污染我运行的子流程的输出。我如何摆脱
javascript - 摆脱 ie8 状态栏中的进度指示器
在 ie8 上，状态栏下方有一个绿色进度指示器，可能表示基于某处某个静态长度值的下载进度。不幸的是，由于“现代”动态 JavaScript、ajax 调用等的性质，该指示器经常会变得困惑，并且栏保持在
mvvm - 摆脱 VM 中的代理属性？
我现在正在学习 MVVM，但我了解的东西很少(这里有很多但很少..): 是否每个模型都可能(通过 VM)暴露给 View 有一个 VM？例如，如果我有一个 Contact 和 Address 实体并

首页

博学

6Ren·AI

商城

html - 如何摆脱 float 上方的上边距？