initial commit

1 files changed, 229 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/clear/index.html b/files/zh-cn/web/css/clear/index.html
new file mode 100644
index 0000000000..a38f07ec96
--- /dev/null
+++ b/files/zh-cn/web/css/clear/index.html
@@ -0,0 +1,229 @@
+---
+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>
+
+ <pre>{{csssyntax}}</pre>
+ </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>&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
+&lt;/div&gt;</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>&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
+&lt;/div&gt;</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>&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
+&lt;/div&gt;</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>