コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > コンテナ内に float:left のある img と float なしの div が存在するのですが、なぜ overflow:hidden を追加することで div を img の左右から分離できるのでしょうか? _html/css_WEB-ITnose

コンテナ内に float:left のある img と float なしの div が存在するのですが、なぜ overflow:hidden を追加することで div を img の左右から分離できるのでしょうか? _html/css_WEB-ITnose

WBOY
リリース： 2016-06-21 09:22:17
オリジナル
1205 人が閲覧しました

<div class="container">    <img style="height:100px;width:100px;float:left;" src="xx.jpg" />    <div style="overflow:hidden">123</div></div>
ログイン後にコピー

効果は次のとおりです:

そして div は img の幅を除くすべての正しい幅を占めます。 overflow:hidden を追加しない場合、効果は次のようになります。

div に float:left を追加した場合も上記の効果を達成できますが、div の幅を設定する必要があります。そうしないと、正しい幅。

アドバイスお願いします、アドバイスお願いします！


ディスカッションへの返信(解決策)

すでに解決済みです。 overflow:hidden により div が BFC 効果を生成するためです。詳しくは「CSS BFC」で検索してください

誰か返信してくれませんか？返信は締め切られています


Xie Wanzun
関連ラベル：
在一个容器中有一个float:left的img和一个无float的div，为什么div加上overflow:hidden
ソース：php.cn
前の記事：ハンサム、付き合ってください。select_html/css_WEB-ITnose のオプションについて質問があります。 次の記事：ナビゲーションフレーム（写真の2番目）を右に移動するにはどうすればよいですか？ _html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS セレクターを使用して、特定の属性またはタグを含む div 要素をターゲットにする方法は? 私はウェブサイトを生成する POS システムに取り組んでいます。コードのほとんどは独自仕様なので、あまり編集できません。いくつかの画像がカテゴリーとしてフローティングされたカテゴリ...
から 2024-04-03 22:25:59
0
1
277
まったく同じことを行うチュートリアルを見ているにもかかわらず、mySQL データベースから情報を受信できません そこで、MySQL データベースの読み取りと書き込みを行うプログラムを作成しようとしており、それが YouTube チュートリアルにつながりました。私の問題は、チュートリアルの男と...
から 2024-04-03 14:46:04
0
1
298
テーブル tr:first-child td の機能上の問題 CSS とテーブルを使用して、分子と分母の間に分数線を配置します。複素分数の場合、Ant ブラウザでは正しく動作しません。以下は、この問題を示す Tryit エディターで使用される...
から 2024-03-30 13:24:05
0
1
295
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート