--- title: clear slug: Web/CSS/clear tags: - CSS - CSS 定位 - CSS 属性 - 参考 translation_of: Web/CSS/clear --- <div>{{CSSRef}}</div> <p> <strong><code>clear</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。<code>clear</code> 属性适用于浮动和非浮动元素。</p> <div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div> <p>当应用于非浮动块时,它将非浮动块的<a href="/en-US/docs/CSS/box_model" title="CSS/box_model">边框边界</a>移动到所有相关浮动元素<a href="/en-US/docs/CSS/box_model" title="CSS/box_model">外边界</a>的下方。这个非浮动块的<a href="/en-US/docs/CSS/margin_collapsing">垂直外边距</a>会折叠。</p> <p>另一方面,两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时,它将元素的<a href="/en-US/docs/CSS/box_model" title="CSS/box_model">外边界</a>移动到所有相关的浮动元素<a href="/en-US/docs/CSS/box_model" title="CSS/box_model">外边框边界</a>的下方。这会影响后面浮动元素的布局,后面的浮动元素的位置无法高于它之前的元素。</p> <p>要被清除的相关浮动元素指的是在相同<a href="https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">块级格式化上下文</a>中的前置浮动。</p> <div class="note"> <p><strong>注意:</strong>如果一个元素里只有浮动元素,那它的高度会是0。如果你想要它自适应即包含所有浮动元素,那你需要清除它的子元素。一种方法叫做<strong>clearfix</strong>,即<code>clear</code>一个不浮动的 {{cssxref("::after")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a>。</p> <pre><code>#container::after { content: ""; display: block; clear: both; }</code> </pre> </div> <h2 id="Syntax" name="Syntax">语法</h2> <pre class="twopartsyntaxbox"><code>/* Keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: unset;</code></pre> <h3 id="Values" name="Values">值</h3> <dl> <dt><code>none</code></dt> <dd>元素<em>不会</em>向下移动清除之前的浮动。</dd> <dt><code>left</code></dt> <dd>元素被向下移动用于清除之前的左浮动。</dd> <dt><code>right</code></dt> <dd>元素被向下移动用于清除之前的右浮动。</dd> <dt><code>both</code></dt> <dd>元素被向下移动用于清除之前的左右浮动。</dd> <dt><code>inline-start</code></dt> <dd>该关键字表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。</dd> <dt><code>inline-end</code></dt> <dd>该关键字表示该元素向下移动以清除其包含块的末端的浮点,即在某个区域的右侧浮动或左侧浮动。</dd> <dt> <h3 id="Formal_syntax">Formal syntax</h3> {{csssyntax}} </dt> </dl> <h2 id="Examples" name="Examples">示例</h2> <h3 id="clear_left" name="clear:_left">clear: left</h3> <h4 id="HTML">HTML</h4> <pre class="brush: html"><code><div class="wrapper"> <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">This paragraph clears left.</p> </div></code></pre> <h4 id="CSS">CSS</h4> <pre class="brush: css"><code>.wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width: 50%; }</code></pre> <p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p> <h3 id="clear_right" name="clear:_right">clear: right</h3> <h4 id="HTML_2">HTML</h4> <pre class="brush: html"><code><div class="wrapper"> <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="right">This paragraph clears right.</p> </div></code></pre> <h4 id="CSS_2">CSS</h4> <pre class="brush: css"><code>.wrapper{ border:1px solid black; padding:10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 50%; }</code></pre> <p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p> <h3 id="clear_both" name="clear:_both">clear: both</h3> <h4 id="HTML_3">HTML</h4> <pre class="brush: html"><code><div class="wrapper"> <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p> <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> <p class="both">This paragraph clears both.</p> </div></code></pre> <h4 id="CSS_3">CSS</h4> <pre class="brush: css"><code>.wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 45%; }</code></pre> <p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p> <h2 id="Specifications">Specifications</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> <td>{{Spec2('CSS Logical Properties')}}</td> <td>Adds the values <code>inline-start</code> and <code>inline-end</code></td> </tr> <tr> <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td> <td>{{Spec2('CSS2.1')}}</td> <td>No significant changes, though details are clarified.</td> </tr> <tr> <td>{{SpecName('CSS1', '#clear', 'clear')}}</td> <td>{{Spec2('CSS1')}}</td> <td>Initial specification</td> </tr> </tbody> </table> <h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> <p>{{Compat("css.properties.clear")}}</p> <h2 id="参见">参见</h2> <ul> <li><a href="/en-US/docs/CSS/box_model" title="CSS/box_model">盒模型</a></li> </ul>