How does browser layout adjacent div to a floating div


Tags: css,css-float

Problem :

I begin to study css recently, and when I learn float, I encounter some problem.

From https://developer.mozilla.org/en-US/docs/Web/CSS/float:

The float CSS property specifies that an element should be taken from the normal flow and >placed along the left or right side of its container, where text and inline elements will >wrap around it.

But I just wonder, what if a div follow the floating element? So I write a test, and it's not wrap around it, it's overlapped with it, and I really get confused, because somebody told me the floating element won't taken from the normal document flow, and the next div will align left to it if there is enough space.

This is the html and css, note that the right div is not floating, if it is floating, it will behave what I expected, but this is not my question.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Float Layout</title>
    <style type="text/css">
        #wrap {
            background: #00c;
            margin: 0 auto;
            width: 960px
        }

        #header {
            background: #FF3300;
            width: 100%;
        }

        #mainbody {
            background: #0CF;
            width: 100%;
            overflow: hidden;
        }

        #footer {
            background: #639;
            width: 100%;
        }

        .left {
            width: 140px;
            height: 200px;
            background: #1f0;
            float: left;
        }

        .right {
            width: 140px;
            height: 500px;
            background: green;
        }

    </style>
</head>
<body>
<div id="wrap">
    <div id="header">header</div>
    <div id="mainbody">
        <div class="left"><h1>Left</h1></div>
        <div class="right"><h1>Right</h1></div>
    </div>
    <div id="footer">footer</div>
</div>
</body>
</html>

I have no enough reputation to post images. The output is that the right div is overlapped by left div, if I replace the right div with a paragraph or h1, it will wrap around the left div which is the expected behaviour.

I just wonder why the right div is overlapped by left div which is a floating element? I cannot figure out an explanation how browser handle this. If the floating element is taken from normal document flow, it can explain this behaviour, but this is the truth. So I have no idea on it.



Solution :

Whatever you've quoted from the documentation:

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

explains this behaviour .

The output is that the right div is overlapped by left div

  • <div> is a block element, so it won't wrap around floated elements.
  • The floated div is taken out of normalflow, hence overlapping the div.right.

    Which is visible if you increase the width of .right.

enter image description here

JSFiddle

if I replace the right div with a paragraph or h1, it will wrap around the left div which is the expected behaviour.

No. <p> and <h1> are also block elements just like <div>, and hence that is not the expected behaviour. Expected behaviour is that they should behave exactly the same as the div .right. Which is happening.

The key thing to note here is that you probably didn't had any text directly inside .right, So you thought <div> is not wrapping, but <p> and <h1> are wrapping because you had text inside them which is wrapping:

The elements itself are not wrapping around, (You just think it is) Only the text inside them is wrapping around the floated element, Since you've specified width:140px, there is not enough space for the text right to sit beside the floated div so it breaks down to next line - Which is the expected behaviour.

Same thing will happen if you directly add some text inside .right div: it'll wrap around, but this doesn't mean the element itself is wrapping:

The <block elements are being overlapped by the floated div and only the text and inline elements are wrapping around it, which is what clearly mentioned in the documentation

If you specify enough width, it'll be aligned beside the floated div

enter image description here

JSFiddle

I don't see anything which is unexpected here.

Side note: "because somebody told me the floating element won't taken from the normal document flow" - I wouldn't believe some guy over the documentation from the guys who makes browsers


    CSS Howto..

    How would I write css to access the following class “total total_plus hidden_elem” or “total total_plus”?

    jQuery how to select children first level div's

    How do you solve this problem regarding aligning divs next to each other? [duplicate]

    How to change menu from on hover to on click

    How to scroll a fixed div when I resize the browser window

    How to add custom font for Avada WordPress Theme

    How to push down absolute positioned div with CSS

    CSS - How to prevent the DIV without content from shrinking

    how to get text beside image button using CSS

    How to use external css file to style a javafx application

    HTML layout with vertical divider and menu between sections - how?

    How to align a button inside a DIV

    PNG background image not showing in IE 8< using html5?

    How to add multiple CSS classes to HTML node in Closure template (soy)?

    How to make Css transition effect work on Safari and Chrome?

    How to freeze frame with css

    How to correct Div overlapping?

    How to change elements opacity based on if checkbox is or is not checked with CSS only?

    How to disable [marquee] tag with CSS? Is this possible?

    How to make transparent corners of borders for a perspective effect?

    CSS: How to vertically align elements inside div with display: table-cell

    How to reuse a css background sprite for icons of different sizes?

    How to apply color to all element between the first and the last without giving a number to nth-child()?

    How to create two CSS transitions in parallel on nested elements

    3x3 CSS grid: how to make center div the only one with a fixed height/width?

    How can I get this chart to display next to data table in CSS?

    Why is border radius not showing up in IE?

    Given the following HTML and CSS how can I get the input elment to fill the width of its parent?

    How to create background css div/rounded corners?

    Vertical alignment in css of multiple elements (How to achieve this layout)