javascript - 清除 : both for divs => 1050px doesn't work

Question

我编写了一个脚本，通过指定文本的宽度、高度、背景和颜色来生成文本部分。根据我的想法，小于 1050 像素的 div 应该得到 float: left，而较大的 float 则不会。

我想提一下，在一切正常工作之前，我不知道我是否在某个地方用轻微的重构代码崩溃了。尝试连续生成三个div

例如:

First div: width: 525, height: 250, background: eaeaea, color: 000
Second div: width: 525, height: 250, background: c0c0c0, color: fff
Third div: width: 1050, height: 400, background: 222222, color: fff

看看会发生什么，前两个元素应该彼此相邻，第三个在下面，而第三个生成的 div 恰好覆盖了前两个 - 为什么？

$("#add_section").on("click", function() {
    var sectionid = $(".sekcja").length;
    var sectionwidth = prompt("Section width");
    var sectionheight = prompt("Section height");
    var bg = prompt("BG color");
    var sectioncolor = prompt("Text color");
    $("#new_section").append('<div class="sekcja" style="width: ' + sectionwidth + 'px; min-height: ' + sectionheight + 'px; background: #' + bg + '; color: #' + sectioncolor + ';"><button type="button" class="add_text">Add text</button><input type="hidden" name="section[' + sectionid + '][sectionwidth]" value="' + sectionwidth + '" /> <input type="hidden" name="section[' + sectionid + '][sectionheight]" value="' + sectionheight + '" /> <input type="hidden" name="section[' + sectionid + '][bg]" value="' + bg + '" /> <input type="hidden" name="section[' + sectionid + '][sectioncolor]" class="sectioncolor" value="' + sectioncolor + '" /> <input type="hidden" class="sectionid" name="sectionid" value="' + sectionid + '" /></div>');
        if ($(".sekcja").length > 0) {
            $("#default-section").css("display", "none");
        }
              
        if (sectionwidth < 1050) {
            $(".sekcja").css("float", "left");
        }
    });

    $("#new_section").on("click", ".add_text", function() {
        var sectionid = $(this).nextAll(".sectioncolor").next().val();
        var inputid = $('.sample').length;
        var inputwidth = prompt("Input width");
        $(this).parent().append('<input type="text" class="sample" style="width: ' + inputwidth + 'px;" placeholder="Sample text..." name="section[' + sectionid + '][input][' + inputid + '][inputtext]"/><input type="hidden" name="section[' + sectionid + '][input][' + inputid + '][inputwidth]" value="' + inputwidth + '" />');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_section">
  <div id="default-section">Default section</div>
</div>

<div style="clear: both;"></div>

<button type="button" id="add_section">Add section</button>

Answer 1

将 overflow: hidden 添加到每个 div.sekcja 元素。没有它，div 元素会被它们的内容覆盖。只需尝试仅使用第一个和第三个元素的示例，您就会看到那里发生了什么。