CSS Float 属性使 DIV 不可点击

Question

我有一个 div，其中包含其他 div 和几个应用于它的 CSS 类。 现在，似乎一切都只适用于我的 div 的文本部分，那里没有文本，没有任何事件或 css 有效。

所有 Jquery 事件和 CSS 属性仅适用于包含在 div 中的文本，而不适用于整个 div。 即使我只是尝试在该 div 的 css 中应用 cursor: pointer; 或什至附加这样的事件处理程序:

$("#myDiv").on("click", function (event) {
    alert("works");
});

我尝试设置一个background-color，设置一个background-image，我尝试了click事件和on 事件。什么都没用。

HTML

<div id="content">
    <div id="meatBlock" class="blocks">
        PORK & BEEF
    </div>
    <div id="cheeseBlock" class="blocks">
        CHEESE & ONIONS
    </div>
</div>

CSS

这是在一个不起作用的内部 Div 上的 CSS:

.blocks
{
    float: left;
    width: 310px;
    height: 141px;
}
#content
{
    max-width: 975px; 
    min-width: 975px;
    margin: 0 auto;
    width: 50%;
}

如果我从 css 中完全删除 float:left，它就可以工作。我不明白为什么，因为我无法在 jsfiddle 中重现它。

任何人有任何建议并且知道这里发生了什么？ 我只需要它在 IE8+ 中工作，所以不用担心 chrome 或 firefox。

Answer 1

我发现了问题。

它是 float:left的确如此。

为了解决这个问题，我放了一个 <div style="clear: both">在所有使用 float 的 div 的末尾，神奇地将 div 的行为恢复正常