没有包裹怎么办`float：left`？

问题描述

| 我有一个具有一定宽度的容器“ 0”（可能会有所不同，具体取决于其内容）。该框包含宽度固定的Box2（可能是图标）。在Box2旁边，我有一些文字的Box3。我希望文本使用Box2右边的所有可用空间。粘贴以下HTML，您将获得：到目前为止，一切都很好。如果文本变长，它不会环绕Box2（这就是我想要的），但是，它不会使Box1增长，这是我的问题。您会告诉我“嘿，如果您将Box3变成position: absolute，您如何期望它使Box1成长？”。好吧，我不知道，然后如何让Box3显示在Box2旁边，使用所有可用的水平空间，并在必要时使Box1增大？（我是否需要说我希望从IE6开始进行此工作，并避免使用表？）

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
        \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
    <head>
        <Meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
        <style type=\"text/css\">
            #Box1 { position: relative }
            #Box3 { position: absolute; left: 2.5em; right: .5em; top: .5em }

            /* Styling */
            #Box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
            #Box2 { background: #999; padding: .5em; }
            #Box3 { background: #bbb; padding: .5em; }
            body  { font-family: sans-serif }
        </style>
        <script type=\"text/javascript\">
        </script>
    </head>
    <body>
        <div id=\"Box1\">
            <span id=\"Box2\">2</span>
            <span id=\"Box3\">3</span>
        </div>
    </body>
</html>

解决方法

您需要将框3用作块级元素，因此请使用display:block，然后将ѭ15连同float一起投入框2中：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
        \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
    <head>
        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
        <style type=\"text/css\">
            #box1 {  }
            #box2 { float:left; }
            #box3 { display:block;overflow:hidden; }

            /* Styling */
            #box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
            #box2 { background: #999; padding: .5em; }
            #box3 { background: #bbb; padding: .5em; }
            body  { font-family: sans-serif }

        </style>
        <script type=\"text/javascript\">
        </script>
        <title>How to do a `float: left` with no wrapping?</title>
    </head>
    <body>
        <div id=\"box1\">
            <span id=\"box2\">2</span>
            <span id=\"box3\">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span>
        </div>
    </body>
</html>

overflow:hidden可以做的所有事情都令人惊奇：D,有两种方法可以实现此目的。两种常见的方法之一是在其后紧跟着一个ѭ19have（例如，用于演示的内联CSS）具有一个空元素：

<span class=\"box1\">...</span>
<br style=\"clear:both\"/>

另一种方法是像这样使用overflow: hidden：

<span class=\"box1\" style=\"overflow: hidden\">...</span>

但是，这两种解决方案都存在问题。与第一个，您添加不必要的和丑陋的标记。第二种情况是，如果您希望将某些东西放置在盒子外面（例如position: absolute），则将看不到它。一个更常见的现代解决方案是使用::after伪元素，并像这样清除它：

.box1::after {
    content: \'\';
    display: table;
    clear: both;
}

,我建议以下内容：

#box1
{
    position: relative; /* or some other positioned value */
}

#box2
{
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

#box3
{
    margin-left: 10px;
}

如果#box2的大小是固定的，则可以简单地为#box3使用边距来防止ѭ27overlapping的重叠，并且由于未定位，,30ѭ会随着#box3的增长而增长。

float float left 包裹