* выбирает все элементы в DOM. Это включает <body>, и это то, что граница, которую вы видите, на самом деле вокруг. Будет более очевидно, если вы удалите плавающий элемент, все остальное в приведенном ниже фрагменте будет таким же:
var elementCount = $("*").css("border", "3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");
h3 {
margin: 0;
}
div,
span,
p {
width: 80px;
height: 40px;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
Поплавковые элементы не приводят к тому, что их контейнеры расширяются, чтобы соответствовать. Когда вы добавляете h3, так как это единственный элемент без плавающего внутри тела, граница тела выглядит так же, как и граница h3.
Аналогично, если вы этого не сделаете добавив h3, вы увидите странную толстую красную рамку сверху, которая, кажется, ничего не окружает, потому что в теле нет элементов, занимающих место:
$("*").css("border", "3px solid red");
h3 {
margin: 0;
}
div,
span,
p {
float: left;
width: 80px;
height: 40px;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
На самом деле h3 не имеет границы - он просто выглядит таким образом, потому что тело занимает то же самое область.