floats and blocking containers_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-02 15:38 出处：网络

http://jsfiddle.net/2yr2A/19/ How do you make containers with floating elements block around the floating elements

相关专题：css

http://jsfiddle.net/2yr2A/19/

How do you make containers with floating elements block around the floating elements

Here is the HTML.

<div>
    <label> foo </label>
    <input type="text" />
</div>
<div>
    <label> foo </label>
    <input type="text" />
</div>

And CSS

input {
    height: 50px;
    float: right;    
    clear: right;
}

And it displays like so :

|------------------------------------------------------|
| foo                                 -----------------|
|-------------------------------------|---------------||
| foo                                 |               |
|-------------------------------------|---------------|
                                      |---------------|
                                      |---------------|
                                      |               |
                                      |               |
                                      |               |
                                      |---------------|

I would like it to display like :

|------------------------------------------------------|
| foo                                 -----------------|
|                                     |               ||
|                                     |               ||
|                                     |               ||
|                    开发者_StackOverflow                 |---------------||
|------------------------------------------------------|
| foo                                 |---------------||
|                                     |               ||
|                                     |               ||
|                                     |               ||
|                                     |---------------||
|------------------------------------------------------|

What is the correct CSS trickery to fix this?

You need the clearfix trick! Basically, use CSS pseudoselectors to stick an empty block-level element after the wrapping div, forcing it to expand past the floated items. See http://jsfiddle.net/82RWe/

Try styling your div's with overflow:hidden.

try the following code:

<html>
<head>
<style type="text/css">
    .InnerDiv {
        width: 300px;
        height: 50px;
    }

    .InnerDiv input {
    height: 20px;
    width:100px;
    float:right;
    }
</style>
</head>
<body>
    <div class="InnerDiv">
        <span> foo </span>
        <input type="text" />
    </div>
    <div class="InnerDiv">
        <span> foo </span>
        <input type="text" />
    </div>
</body>
</html>