diff options
Diffstat (limited to 'files/zh-cn/web/css/float/index.html')
| -rw-r--r-- | files/zh-cn/web/css/float/index.html | 247 |
1 files changed, 247 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/float/index.html b/files/zh-cn/web/css/float/index.html new file mode 100644 index 0000000000..30f9928c0b --- /dev/null +++ b/files/zh-cn/web/css/float/index.html @@ -0,0 +1,247 @@ +--- +title: float +slug: CSS/float +tags: + - CSS + - CSS Positioning + - CSS Property + - CSS 定位 + - CSS 属性 + - 参考 +translation_of: Web/CSS/float +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与<a href="/zh-CN/docs/Web/CSS/position#Absolute_positioning">绝对定位</a>相反）。</span></p> + +<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div> + + + +<p><strong>浮动元素</strong>是 <code>float</code> 的计算值非 <code>none</code> 的元素。</p> + +<p>由于float意味着使用块布局，它在某些情况下修改{{cssxref("display")}} 值的计算值：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">指定值</th> + <th scope="col">计算值</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>inline</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-block</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td><code>table</code></td> + </tr> + <tr> + <td><code>table-row</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>flex</code></td> + <td><code>flex</code>, 但是float对这样的元素不起作用</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td><code>inline-flex</code>, 但是float对这样的元素不起作用</td> + </tr> + <tr> + <td><em>other</em></td> + <td><em>unchanged</em></td> + </tr> + </tbody> +</table> + +<div class="note"><strong>备注：</strong>如果要在 JavaScript 中把float属性当作{{domxref("element.style")}}对象的一个成员来操作，那么在Firefox 34 和更老的版本中，你必须拼写成cssFloat。另外还要注意到在 Internet Explorer 8 和更老的IE当中，要使用<code>styleFloat</code>属性。这是DOM驼峰命名和CSS所用的连字符分隔命名法对应关系中的一个特例（这是因为在 JavaScript 中"float"是一个保留字，因为同样的原因，"class"被改成了"className" 、"for"被改成了"htmlFor"）。</div> + +<h2 id="语法">语法</h2> + +<pre class="notranslate">/* Keyword values */ +float: left; +float: right; +float: none; +float: inline-start; +float: inline-end; + +/* Global values */ +float: inherit; +float: initial; +float: unset;</pre> + +<p><code>float</code> 属性的值被指定为单一的关键字，值从下面的值列表中选择。</p> + +<h3 id="值">值</h3> + +<dl> + <dt><code>left</code></dt> + <dd>表明元素必须浮动在其所在的块容器左侧的关键字。</dd> + <dt><code>right</code></dt> + <dd>表明元素必须浮动在其所在的块容器右侧的关键字。</dd> + <dt><code>none</code></dt> + <dd>表明元素不进行浮动的关键字。</dd> + <dt><code>inline-start</code></dt> + <dd>关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。</dd> + <dt><code>inline-end</code></dt> + <dd>关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。</dd> +</dl> + +<h3 id="形式化语法">形式化语法</h3> + +<pre class="syntaxbox notranslate">{{csssyntax("float")}}</pre> + +<h2 id="例子">例子</h2> + +<h3 id="浮动元素是如何定位的">浮动元素是如何定位的</h3> + +<p>正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到<strong>另外一个浮动的元素</strong>。</p> + +<p>在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。</p> + + + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><section> + <div class="left">1</div> + <div class="left">2</div> + <div class="right">3</div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Morbi tristique sapien ac erat tincidunt, sit amet dignissim + lectus vulputate. Donec id iaculis velit. Aliquam vel + malesuada erat. Praesent non magna ac massa aliquet tincidunt + vel in massa. Phasellus feugiat est vel leo finibus congue.</p> +</section> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">section { + border: 1px solid blue; +} + +div { + margin: 5px; + width: 50px; + height: 50px; +} + +.left { + float: left; + background: pink; +} + +.right { + float: right; + background: cyan; +}</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p> + +<h2 id="清除浮动">清除浮动</h2> + +<p>有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。请参考 {{cssxref("clear")}} 以获取例子等。</p> + +<blockquote> +<div class="blockIndicator note" style="margin-bottom: 0;"> +<p><strong>译者注：</strong>以下直至“规范”部分，皆为英文原文中已剔除的过时内容。</p> +</div> +</blockquote> + +<p>在前面的例子当中，浮动的元素的高度比它们所在的容器元素（是块元素）的高度小。然而如果块元素内的文本太短，不足以把块元素的大小撑到高度大于所有浮动元素的高度，我们可能会看到意想不到的效果。例如，如果上面图片中的文字只有"Lorem ipsum dolor sit amet,"，并且接下来是另外一个和"Floats Example"这个标题一样风格的标题元素，那么第二个标题元素会出现在红色的正方形之间。然而在大多数这种情况下，我们希望这个标题元素是靠左对齐的。为了实现这个效果，我们需要清除浮动。</p> + +<p>这个例子中，最简单的清除浮动方式就是给我们想要确保左对齐的新标题元素添加{{Cssxref("clear")}}属性：</p> + +<pre class="brush:css notranslate">h2.secondHeading { clear: both; } +</pre> + +<p>然而这个方法只是在同一<a href="/zh-CN/docs/Web/Guide/CSS/Block_formatting_context">块级格式化上下文（block formatting context）</a>中没有其他元素的时候才是有效的。如果我们的 <code>H2</code> 有兄弟元素是向左浮动和向右浮动的边栏，那么使用<code>clear</code> 会导致这个标题元素出现在边栏的下方，这显然不是我们期望的结果。</p> + +<p>如果不能使用清除浮动，另一种做法是浮动容器的限制块级格式化上下文。再次列举上面的例子，有三个红色的正方形和一个<code>P</code>元素。我们可以设置<code>P</code>元素的{{Cssxref("overflow")}}属性值变成<code>hidden</code> 或者<code>auto</code>，因为这样可以让容器元素伸展到能够包含红色正方形，而不是让他们超出块元素的底部。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>添加了 <code>inline-start</code> 和 <code>inline-end</code>。</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>大量新属性值，但目前还没完全定义清楚。任何与新特性无关的浏览器差异应该是无意中造成的，需要报告。</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>没有改变。</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#float', 'float')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>初始定义。</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.float")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/CSS/block_formatting_context">块级格式化上下文（Block formatting context）</a></li> + <li>使用 {{cssxref("clear")}} 强制元素移至浮动元素下方。</li> +</ul> |