フローティングボックスが this_html/css_WEB-ITnose のように表示されるのはなぜですか-htmlチュートリアル-php.cn

ディスカッションに返信(解決されたスキーム)

ホームページ

ウェブフロントエンド

htmlチュートリアル

フローティングボックスが this_html/css_WEB-ITnose のように表示されるのはなぜですか

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:30 AM

<!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 までご連絡ください。