Jquery ui jQuery UI选项卡：如何将带有float:left属性的div放置到选项卡中？

我对选项卡使用jQueryUI1.8.16。 我想在第一个选项卡中放置几个div作为列（使用

float:left

property）

但我不能正确地执行此操作：看起来选项卡不希望以正确的方式使用float属性（请参见文本下的图像）

代码如下：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
        <div id="tabs-1">
                <div style="border:1px solid red;float:left;">
                    some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>
                </div>
        </div>
        <div id="tabs-2"></div>
        <div id="tabs-3"></div>

</div>

一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本

如何解决这个问题

谢谢

为了让容器计算出正确的高度，您必须：

<div id="tabs-1">
    <div style="border: 1px solid red; float: left;">
        some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>
    </div>
    <div style="clear: both;"></div>
</div>

一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本

您可以在中看到结果