html float 的奇怪行为

Question

我不明白如何解决这个问题。我试图将我的搜索表单插入到其他人编写的页面中，并且它重叠。

这是错误的版本。正如你所看到的，它有一个奇怪的行为。

http://jsfiddle.net/ecFWr/2/

这是相关的代码位

<div style="width: 400px; float:right">
        <link rel="stylesheet" type="text/css" href="/css/search.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/jquery.color.js"></script>
        <script type="text/javascript" src="/js/search.js"></script>
        <link rel="stylesheet" href="/css/search.css">
        <form id="searchForm" action="/tags/search">
            <fieldset style="border:0px; padding:0px">
                <div class="input">
                    <input type="text" name="s" id="s" value="Cerca...">
                </div>
                <div>
                    <input type="submit" id="searchSubmit" value="">
                </div>
            </fieldset>
            <input type="hidden" name="owner_id" id="owner_id" value="1">
        </form>
        <div>
            <fieldset>
                <legend style="padding:0;">
                <span style="display:none;">
                Documento di sintesi &nbsp;<a href="javascript:;" title="TOGGLE_RESOURCE" onclick="jQuery_1_4_x('#wiki').toggle(!jQuery_1_4_x('#wiki').is(':visible'));"><img src="/img/icons/zoom.png" alt="show">Mostra/Nascondi</a>
                </span>
                </legend>
                0 documenti di sintesi presenti<br>
                <a href="/wikitool/create/Infodisc/1"><img src="/img/icons/page_add.png" style="border: 0px; margin-bottom: -3px;" class="pngfix" alt=""> Crea un documento di sintesi</a>
                <div id="wiki" style="display: none;">
                </div>
            </fieldset>
        </div>

如果我使用

<div style="width: 400px;">

而不是

<div style="width: 400px; float:right">

我得到这个

我做错了什么？

如果需要的话我可以发布整个页面。

Answer 1

如果你只是想将搜索区域放在右侧而不重叠，你可以让你的 div 向右浮动，并使其下面的 div 向左浮动，如下所示：

<div style="width: 400px; float: right;">
  ... your div
<div>
<div style="width: 100%; float:left;">
  ... div immediately below
<div>

更新版本： http://jsfiddle.net/ecFWr/4/