0

質問を表示するコードはありませんでしたが、w3schoolsのWebサイトからいくつか削除しました。これが彼らがあなたにクリアで遊ぶためにあなたに与える例です。

<style type="text/css">
img
{
float:left;
}
p.clear
{
clear:left;
}
</style>
</head>
<body>

<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" /><p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>

私の質問は、clearプロパティの使用についてです。クリアされた要素を、その前にあるフロートされた要素からそれ以上下に移動できないのはなぜですか？

つまり、なんらかの理由で、テキスト段落とその画像の間に2、3行の空白行が必要だったとしましょう。ページ分割が機能していないようです。

段落に相対的な位置を追加して上部マージンを大きくすると、それは機能しますが、これ以上表示する必要がなくなった例では、フロートdivの下のクリアされたdivであり、aの下のクリアされた段落ではありません浮いた画像、そしてその場合、マージンを追加するための相対的な配置でさえ機能しませんでした。

正確には、それを適用する要素がドキュメントの残りの部分とどのように流れるかについて、明確なことは何をしますか？私は何が明確なのか知っています。以前のフロートオブジェクトがどちら側にあることができないかを言っていることは知っていますが、それは要素ITSELFに何をしますか？クリアされた要素は、フロートされた要素と同じフローに何らかの形でアタッチされますか？

4

2 に答える 2

0

段落<br class="clear" />の前にあるか、上余白を追加します。

于 2012-05-29T02:25:55.277 に答える
0

clearプロパティは、要素のボックスのどちら側をフロート要素に隣接させることができないかを指定し、これらのフロート要素が同じブロックフォーマットconextにある場合にのみ指定します。

SitePointから：

クリアすると、影響を受けるフロートボックスがなくなるまで、クリアされた要素の上部マージンの上にスペースが追加されます。その結果、要素とフロートボックスの間に特定のスペースが必要な場合、クリアされた要素の上部マージンを使用できません。

フロートされた要素の後にクリアされていない他の要素を配置しようとすると、基本的に同じコンテキストに保持されます。これは、フローティングの仕組みと単純に関係しています。

画像と段落の間に空白行を入れたい場合は、img要素にmargin-bottomを追加します。

<style type="text/css">
img
{
  float: left;
  margin-bottom: 10px;
}
p.clear
{
  clear: both;
}
</style>
</head>
<body>

<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" />
<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>​​​​​​​​​​​​​​​​​​​​​​​

先に進むこともできますが、これにより、フローティングとCSSクリアプロパティについて知っておく必要のあるすべてのことがわかると思います：http： //reference.sitepoint.com/css/floatclear

そしてその点で、私はw3schoolsに対して強くお勧めします。なぜなら、彼らは誤った情報を持っていることが知られているからです。参照： http ：//w3fools.com/

于 2012-05-29T03:13:50.213 に答える