14

次のテストケースを考えてみましょう。ここでは、float要素とinline要素が<fieldset>対の中に配置されてい<div>ます。

.float {
  float: right;
  background-color: red;
  height: 200px;
}
<h1>With fielset</h1>
<fieldset>
  <span>Inline!</span>
  <div class="float">Float!</div>
</fieldset>
<fieldset>
  <span>Inline!</span>
  <div class="float">Float!</div>
</fieldset>

<h1>With div</h1>
<div>
  <span>Inline!</span>
  <div class="float">Float!</div>
</div>
<div>
  <span>Inline!</span>
  <div class="float">Float!</div>
</div>

レンダリングすると、fieldsetコンテナの高さは200ピクセルになりますが（フロートはクリアされますか？）、divコンテナの高さはインライン要素と同じです。この動作の原因は何ですか？fieldsetまた、コンテナがコンテナと同じように動作できるようにする回避策はありdivますか？

4

2 に答える 2

19

どうやら<fieldset>要素は、そのコンテンツのブロックフォーマットコンテキストを生成することになっています：

このfieldset要素は、新しいブロックフォーマットコンテキストを確立することが期待されています。

そのため、フロートされた要素はそれらからフロートしません。これは、ビジュアルフォームコントロールグループとしてのフィールドセットの性質に関係していると思います。他の理由も考えられますが、頭のてっぺんからそれが最も妥当に聞こえます。

これを元に戻す方法はないようですが、私は驚かないでしょう。ブロックフォーマットコンテキストを作成した後、破棄することはできません。

ちなみに、 sはフロートをクリア<fieldset>しません（フロートに以外のスタイルを与えない限り）。要素がフロートをクリアする（またはクリアランスがあると言われる）と、同じフォーマットコンテキスト内で要素に接触する先行するフロートのみがクリアされます。親要素も子​​のfloatをクリアしませんが、子のfloatインのフォーマットコンテキストを確立できます。これは、で見られる動作であり、親要素以外に設定した場合にも発生します。clearnone<fieldset>overflowvisible

仕様から（強調鉱山）：

このプロパティは、要素のボックスのどちら側が以前のフローティングボックスに隣接していない可能性があるかを示します。'clear'プロパティは、要素自体の内部または他のブロックフォーマットコンテキスト内のfloatを考慮しません。

さらに、コメントで述べたように、その要素に対してブラウザによって定義されたクリアリングスタイルはないため、デフォルトのクリアリングスタイルはすでにデフォルト値の。になっていますnone。これは、このデモに示されています。このデモでは<fieldset>、フローティングボックスの後にあるの1つだけがクリアリングプロパティを持つように定義されており、実際にフロートをクリアするものです。

.float {
  float: right;
  background-color: red;
  height: 200px;
}

.clear {
  clear: right;
}
<div class="float">Float!</div>
<fieldset>
  <legend>Fieldset!</legend>
</fieldset>
<fieldset class="clear">
  <legend>Clearing fieldset!</legend>
</fieldset>

デモの外部リンク

于 2011-06-26T03:58:10.263 に答える
-1

ラッパーdivの高さを設定します。 

 <html>
 <head>    
  <style type="text/css">       
   .float {float:right; background-color:red;             height:200px;}   
</style> 
 </head> 
 <body>    
 <fieldset>    
   <span>Inline!</span>    
   <div class="float">Float!</div>  
 </fieldset> 
 <fieldset>     
    <span>Inline!</span>      
   <div class="float">Float!</div>
 </fieldset> 

  <div style="height:200px">    
   <span>Inline!</span>     
  <div class="float">Float!</div> </div> 
 <div style="height:200px">     
 <span>Inline!</span>    
 <div class="float">Float!</div> 
</div>
</body>
</html>
于 2011-06-26T04:00:27.053 に答える