当前位置: 动力学知识库 > 问答 > 编程问答 >

CSS float prevents expansion of page

问题描述:

This is a very common scenario, I think.

I'm relatively (no pun intended) new to CSS and am having an issue with float alignment. I have two divs, one which will hold main content to be floated left and the other for navigation, which should be floated right.

Anyway, here is what happens when I don't apply any CSS formatting. This is desired behavior; the page will scroll down as expected:

Desired behavior

Here is what happens when I apply float: left or float: right to the respective elements:

Undesired page overflow

They both overflow past the page. I want it to stretch the page so that it scrolls down if it doesn't fit on one screen area.

A snippet of my HTML:

<body>

<div id="wrapper">

<div id="header"></div>

<div id="content">

<div id="main">

<p>Lorem ipsum [...snip...]</p>

</div>

<div id="secondary">

<p>Lorem ipsum [...snip...]</p>

</div>

</div>

<div id="footer">&copy;</div>

</div>

</body>

And the corresponding CSS:

#content {

padding:10px;

padding-top: 110px;

padding-bottom:60px; /* Height of the footer */

}

#main {

padding: 10px;

float: left;

width:70%;

text-align:left;

}

#secondary {

padding: 10px;

float: right;

width:20%;

}

Why is it doing this, and how can I fix it?

网友答案:

Clear the floats and you should be OK.

For example according to your example:

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <div id="main">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary">
        <p>Lorem ipsum [...snip...]</p>
    </div>

    <!-- clear -->
    <div style="clear:both;"></div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

Update: for older IE browsers, the clearing div might need a height defined to give it a "hasLayout" property or else it will ignore this div. http://www.satzansatz.de/cssd/onhavinglayout.html

Generally, people make a class definition that has all this info so you only need to type <div class="clear"></div>

Here's an example of robust clearing CSS from http://sonspring.com/journal/clearing-floats

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

There are alternative methods to clear floats in the parent div and removing the extra, structural <div> tag but I personally don't feel a need to investigate if they are bullet-proof if this solution definitely is.

网友答案:

Any floating element will increase the height of container div, so a floating element may have 1000 lines of code yet height of its parent element will remain zero unless there is an block element after the floating element..

I've modified your code a bit

<body>
<div id="wrapper" class="clrfx">
    <div id="header"></div>
    <div id="content">
    <div id="main" class="clrfx">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary" class="clrfx">
        <p>Lorem ipsum [...snip...]</p>
    </div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

css:

.clrfx:after {
    clear: both;
    display: block;
    content: "";
}

Rule of thumb is, assign class="clrfx" to any Div which has atleast one child element which is floating. Some people use <div class="clear"></div> but this SHOULD NOT be used as clearing is a part of styling and not of markup.

In worst case if you have to use this then I would advise use

<br class="clear" />

because breaking line is close to clearing

网友答案:

As you said that you were new to CSS: Floated elements have no height. Therefore #content is defaulting to minimum height, which is the combined height of the paddings.

Adding <div style="clear:both;"></div> after div#secondary will force it to below the floated elements. As this div does have a height, it causes #main to behave as expected. See Yuji's answer for sample code.

网友答案:

Floating elements are removed from the flow, so they are not taken into consideration when their parent element's height is being calculated and their parent element is set to overflow: visible.

You can either place a dummy element beneath the floated elements (forcing the dummy element to the correct place with the clear property), or you can set the parent element to something other than overflow: visible.

网友答案:

To make your wrapper contain all floated elements, simply set;

#wrapper {overflow: hidden;}

Simple, and you're done. No extra markup.

分享给朋友:
您可能感兴趣的文章:
随机阅读: