Why Float Element Does Not Overlap On H3 Element?

- 1 answer

My observation is, float elements overlap on its previous elements, but in the below code, div element did not over lap body element.

<!DOCTYPE html>
        <meta charset="UTF-8">
        <title>All selector</title>
        <style type="text/css">
                margin: 0;
                heigth: 10px;
            div, span, p{
                width: 80px;
                height: 40px;
                float: left;
                padding: 10px;
                margin: 10px;
                background-color: #EEEEEE;
        <script type="text/javascript" src="">

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

Actual output is:

enter image description here

As per my understanding on float:left,

Expected output is,

enter image description here Why 3 float elements div, span & p are not overlapping on body element?



Floating element is shown floating against the content that follows it. There is no content after the div / span / p tags. Note: you are prepending the h3 tag to body. Try appending and see what output you get.