blocks|key|1047642|text|清除浮点数的方法不止一种。您可以在此处查看以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1047643|http://work.arounds.org/issue/3/clearing-floats/|offset|length|1047644|例如，clear:both可能适合你|style|CODE|1047645|#element:after+{
++++content:"";
++++clear:both;
++++display:block;
}

#element+{+zoom:1;+}|code-block|syntax|javascript|1047646|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1C|0|0|3|A|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@$D|11|E|12|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

<p>There's more than one way to clear floats. You can check some here:<br>
<a href="http://work.arounds.org/issue/3/clearing-floats/" rel="noreferrer">http://work.arounds.org/issue/3/clearing-floats/</a></p>

<p>E.g., <code>clear:both</code> might work for you</p>

<pre><code>#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }
</code></pre>


blocks|key|1047686|text|包含的div上的overflow:auto;使其中的所有内容(即使是浮动项)都可见，而外部div则完全包围它们。请参阅此示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1047687|​|1047688|.wrap+{
++padding:+1em;
++overflow:+auto;
++background:+silver;
+}
+
.float+{
++float:+left;
++width:+40%25;
++background:+white;
++margin:+0+1%25;
}|code-block|syntax|javascript|1047689|<div+class="wrap">
++<div+class="float">Cras+mattis+iudicium+purus+sit+amet+fermentum.+At+nos+hinc+posthac,+sitientis+piros+Afros.+Qui+ipsorum+lingua+Celtae,+nostra+Galli+appellantur.+Petierunt+uti+sibi+concilium+totius+Galliae+in+diem+certam+indicere.+Ambitioni+dedisse+scripsisse+iudicaretur.</div>
++<div+class="float">Mercedem+aut+nummos+unde+unde+extricat,+amaras.+A+communi+observantia+non+est+recedendum.+Quisque+ut+dolor+gravida,+placerat+libero+vel,+euismod.+Paullum+deliquit,+ponderibus+modulisque+suis+ratio+utitur.</div>
++</div>|1047690|1047691|entityMap^0|8|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p><code>overflow:auto;</code> on the containing div makes everything inside of it (even floated items) visible and the outer div fully wraps around them. See this example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
  &lt;div class="float"&gt;Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.&lt;/div&gt;
  &lt;div class="float"&gt;Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.&lt;/div&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|832907|text|在许多情况下，overflow:+auto;就足够了，但是为了完善和跨浏览器支持，请看一下Clearfix，它可以在所有浏览器上完成这项工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|832908|让我们考虑一下下面的标记。|832909|<div+class="clearfix">
+++<div+class="content">Content+1</div>
+++<div+class="content">Content+2</div>
</div>|code-block|syntax|javascript|832910|以及以下样式..|832911|.content+{+float:left;+}|832912|.clearfix+{+..from+link..+}|832913|如果没有clearfix，父div就不会有一个高度，因为它是浮动的子级。clearfix会让父进程考虑浮动子进程。|832914|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webtoolkit.info/css-clearfix.html^0|7|F|19|8|0|0|0|0|0|0|O|0|0|R|0|E|3|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

<p>In many cases, <code>overflow: auto;</code> will be enough, but for the sake of completion and cross browser support, have a look at <a href="http://www.webtoolkit.info/css-clearfix.html" rel="noreferrer">Clearfix</a> which will do the job for all browsers.</p>

<p>Lets consider the following markup..</p>

<pre><code>&lt;div class="clearfix"&gt;
   &lt;div class="content"&gt;Content 1&lt;/div&gt;
   &lt;div class="content"&gt;Content 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Along with the following styles..</p>

<p><code>.content { float:left; }</code></p>

<p><code>.clearfix { ..from link.. }</code></p>

<p>Without the clearfix, the parent <code>div</code> wouldn't have a height due to it's floating children. The clearfix will make the parent consider the floating children.</p>


blocks|key|832960|text|我认为一个很好的方法就是在div上设置display:+table。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|832961|entityMap^0|J|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>I figured that a great way to do it is setting <code>display: table</code> on the div.</p>


<p>How can I make a div grow its height when it has floats inside of it? I know that defining a value for the width and setting overflow to hidden works. The problem is that I need a div with the overflow visible. Any ideas?</p>


How to make a div grow in height while having floats inside

当一个div内部有浮动的时候，我如何让它增长它的高度？我知道为宽度定义一个值并将overflow设置为隐藏是可行的。问题是我需要一个溢出可见的div。有什么想法吗？

问如何让div在内部具有浮动的情况下增长高度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让div在内部具有浮动的情况下增长高度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让div在内部具有浮动的情况下增长高度
EN