Css 为什么标题隐藏在上一个div元素下？

我正在尝试设计页面，为了我的生活，我不明白为什么H1标题

学习法语在线免费与莫茨德L'actu

部分被其上方右侧浮动的div遮挡。我试着在上面的Div上放置2米的底边距，然后试着在包含标题的Div上放置顶边距。它在外部运行良好，所以我怀疑CSS是正确的，但在WordPress内部，标题滑到上面的Div下面。我不是专家，但这似乎编码正确：

代码如下：

<div style="float: left; width:360px; height:467px;">
   <h2 style="text-align: center;">Top Stories: Le Progres</h2>
   [WordPress shortcode for an advanced iFrame]
</div>
<div style="float: right; width:517px; height:560px; margin-bottom: 2em;">
   <h2>Funny Helps Learning</h2>
   [WordPress shortcode for an advanced iFrame}
</div>
<div style="float: left; clear: both;">
   <h1 style="text-align: center; color: #0b00dd;">Learn French Online 
      Free with Mots de  L'actu
   </h1>
   TEXT
</div>

热门故事：LeProgres
[高级iFrame的WordPress短代码]
有趣有助于学习
[高级iFrame的WordPress短代码}
在线学习法语
免费提供《行动纲领》
正文

将左右浮动div包装到另一个div中，并向其中添加clearfix。它应该可以正常工作

<div id="wrapper" class="clearfix">
   <div style="float: left; width:360px; height:467px;">

   <h2 style="text-align: center;">Top Stories: Le Progres</h2>

   [Wordpress shortcode for an advanced iFrame]

   </div>

   <div style="float: right; width:517px; height:560px; margin-bottom: 2em;">

   <h2>Funny Helps Learning</h2>

   [Wordpress shortcode for an advanced iFrame}

   </div>
</div>

<div style="float: left; clear: both;">

<h1 style="text-align: center; color: #0b00dd;">Learn French Online 
Free with Mots de  L'actu</h1>

TEXT

</div>

与其父div一样设置为高度560px，但在

#ai-div-news7

上方有一个

正在强制

#ai-div-news7

向下

请查看该网站的控制台并访问

---

将

更改为

可以解决问题。

为什么两个div的高度不同？我正在使用一个名为Advanced IFrame的Wordpress插件，它允许我剪切一个“切片”我试图使Div的尺寸与切片的尺寸相同，否则在Iframe中查看的网站部分会“漂移”什么控制台？这是一个Wordpress网站。我在创建帖子时有HTML或可视版本。我不确定你的意思。另外，我认为ID ai-div-news7来自“iframed”网站，不是我的，所以我无法控制。对不起，控制台是指你使用的浏览器中的JavaScript控制台。当我查看你的网站时，出现了20多个错误，其中一些错误来自“iframed”内容。进行您建议的更改确实有效，但您介意解释一下原因吗？您提到的ID来自Iframed站点，因为我只使用内联样式。因此，将h2放在Div中会将ai-Div-news7 Div放在Iframe中吗？将h2放在Div之外（或者放在自己的Div中）也会有效吗包含Iframe？感谢您对控制台的说明。通过不为

指定高度，我们允许div根据内容的高度设置自己的高度。当

具有正确的高度时，它允许将先前覆盖的标题放低。

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}