ホームページ >ウェブフロントエンド >htmlチュートリアル >フローティング
ボックスが this_html/css_WEB-ITnose のように表示されるのはなぜですか
フローティング ボックスが this_html/css_WEB-ITnose のように表示されるのはなぜですか
- WBOYオリジナル
- 2016-06-21 09:30:251084ブラウズ
<!DOCTYPE html><html><head><style>div.one{ width:350px; border:solid 5px;padding:0px}div.two{ width:50px;border:solid 2px; float: left;}p{border:solid 5px;padding:0px}</style></head><body><div class="one"><p >你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是逼的任务</p><div class="two"> 应该显示在one 框的左上部</div></div></body></html>
フローティング ボックスは、その外側の端が、含まれているボックスまたは別のフローティング ボックスの境界線に触れるまで、左右に移動できます。
-------------------------
しかし、なぜ 2 つのボックスが 1 つのボックスの外側に表示されるのでしょうか?
ディスカッションに返信(解決されたスキーム)
「フローティング ボックスは、その外縁が収容ボックスまたは別のフローティング ボックスの境界線に触れるまで、左右に移動できます。」
---------- ---- ------------------------
この文は次のように理解する必要があります: フローティング ボックスが非フローティング ボックスのすぐ隣にある場合、フローティング ボックスはボックス ボックスは左右に動くだけで、上には浮きません。フローティングボックスのすぐ上に別のフローティングボックスがある場合、そのフローティングボックスは上に浮き上がります。
p タグが途中でブロックされています
説明します: 最初に簡単なコードを作成します
<div> <div class="one"></div> <div class="two"></div></div>
説明:
div はブロックレベルの要素であり、デフォルトでは全幅を占めます。一般に、要素が浮動している場合は幅を定義するのが最善であり、それ以外の場合は内容に応じて幅が変わります。
1 1 つが浮いていない場合、2 つの浮遊物は 1 つより下にのみ浮くことができます。
2 1 つが浮いている場合、2 つの浮動位置は幅に関係します。 two+one width
子ブロックは浮遊し、親ブロックは縮小します。 。 。それだ。 。 。 。 。 。
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
- WBOYオリジナル
- 2016-06-21 09:30:251084ブラウズ
<!DOCTYPE html><html><head><style>div.one{ width:350px; border:solid 5px;padding:0px}div.two{ width:50px;border:solid 2px; float: left;}p{border:solid 5px;padding:0px}</style></head><body><div class="one"><p >你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是逼的任务</p><div class="two"> 应该显示在one 框的左上部</div></div></body></html> フローティング ボックスは、その外側の端が、含まれているボックスまたは別のフローティング ボックスの境界線に触れるまで、左右に移動できます。
-------------------------
しかし、なぜ 2 つのボックスが 1 つのボックスの外側に表示されるのでしょうか?
ディスカッションに返信(解決されたスキーム)
「フローティング ボックスは、その外縁が収容ボックスまたは別のフローティング ボックスの境界線に触れるまで、左右に移動できます。」
---------- ---- ------------------------
この文は次のように理解する必要があります: フローティング ボックスが非フローティング ボックスのすぐ隣にある場合、フローティング ボックスはボックス ボックスは左右に動くだけで、上には浮きません。フローティングボックスのすぐ上に別のフローティングボックスがある場合、そのフローティングボックスは上に浮き上がります。
p タグが途中でブロックされています
説明します: 最初に簡単なコードを作成します
<div> <div class="one"></div> <div class="two"></div></div>
説明:
div はブロックレベルの要素であり、デフォルトでは全幅を占めます。一般に、要素が浮動している場合は幅を定義するのが最善であり、それ以外の場合は内容に応じて幅が変わります。
1 1 つが浮いていない場合、2 つの浮遊物は 1 つより下にのみ浮くことができます。
2 1 つが浮いている場合、2 つの浮動位置は幅に関係します。 two+one width
子ブロックは浮遊し、親ブロックは縮小します。 。 。それだ。 。 。 。 。 。
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。