Question

我的观察是，浮动元素在其前面的元素上重叠，但在下面的代码中，div元素没有超过body元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>All selector</title>
        <style type="text/css">
            h3{
                margin: 0;
                heigth: 10px;
            }
            div, span, p{
                width: 80px;
                height: 40px;
                float: left;
                padding: 10px;
                margin: 10px;
                background-color: #EEEEEE;
            }
        </style>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js">
        </script>
    </head>
    <body>
        <div>DIV</div>
        <span>SPAN</span>
        <p>P<button>BUTTON</button></p>

        <script type="text/javascript">
            var elementCount = $('*').css("border", "3px solid red").length;
            $('body').prepend("<h3>" + elementCount + " elements found</h3>");
        </script>
    </body>
</html>

实际输出为：

根据我对float:left的理解，

预期输出是，

为什么3个浮点元素div，span＆amp; p元素上的body没有重叠？

Answer 1

浮动元素显示为浮动元素后面的内容。 div / span / p标签后面没有内容。注意：您正在将h3标记添加到正文。尝试附加，看看你得到了什么输出。

为什么float元素在h3元素上不重叠？

1 个答案: