css - 为什么标题隐藏在前一个 div 元素下面？

Question

我正在尝试为页面设置样式 http://techno-french.com/french-news-room对于我的生活，我无法弄清楚为什么 H1 标题，

通过 Mots de L’actu 免费在线学习法语

部分被其上方右侧 float 的 div 遮挡。我试过将 2em 的底部边距放在上面的 Div 上，然后尝试将顶部边距放在包含标题的 Div 上。它在 Dreamweaver 中运行良好在WordPress之外，所以我怀疑 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>

Answer 1

将左右浮动的 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>

CSS:

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