haslaylout と bfc 解析の理解

haslaylout と bfc 解析の理解
1. haslayout と bfc は IE 固有の標準属性です。

2. BFC はページ上の分離された独立したコンテナーです。コンテナー内の子要素は外部の要素に影響を与えず、その逆も同様です。

3. BFC には 3 つの機能があります。

1. 浮動要素を含む、

2. 脚本の重複を防ぐ

3. 浮遊要素に隠れないようにする

4. トリガー条件:

None以外の浮動小数点値
表示以外のオーバーフロー値(非表示、自動、スクロール)
表示 (テーブルセル、テーブルキャプション、インラインブロック、フレックス、インラインフレックス)
位置値は(絶対、固定)
フィールドセット要素

bfc は独立したコンテナであり、他のレイアウトに影響を与えず、影響を受けることはないということを覚えておくことが重要です。その特性を利用することで、フロートのクリアや 2 列レイアウトなどの問題を解決できます。

例: 2列の適応レイアウト

1. フローティングマージンとマイナスマージンで解決する

2. bfcをトリガーし、フローティング要素によってカバーされなくなります

<<:  CSSテキストシャドウの徐々にぼやける効果の実装

>>:  HarborをベースにしたDocker専用倉庫の構築方法

推薦する

MySQL マスタースレーブレプリケーションの原理と注意点

前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...

マウスをホバーすると画像が折りたたまれる効果を実現する CSS

マウスをホバーすると画像が折りたたまれる効果を実現する CSS 1. 実施のポイント折り畳みは複数の...

MySQL 8.0 が起動できない 3534 の解決策

MySQL 8.0 サービスを開始できません最近、 cmdで MySQL サービスを起動するときに遭...

React Nativeがシミュレータにリンクできない件について

React Native は、現在人気のオープンソース JavaScript ライブラリ React...

入力ボックスの値を取得する方法のReactの例

入力ボックスの値を取得する複数の方法最初の方法は、制御されていないコンポーネントの取得です2番目の方...

Nodejs は JSON 文字列を JSON オブジェクトに変換するエラー解決法

JSON 文字列を JSON オブジェクトに変換するにはどうすればいいですか? JSON.parse...

JavaScript のよりエレガントなエラー処理方法 async await

目次背景なぜエラー処理が必要なのでしょうか? async await より適切なエラー処理まとめ要約...

iframe を更新する 3 つの方法

コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...

Vueは単純なランダムロールコールを実行します

目次レイアウト部分: <div id="アプリ"> <p>...

CSSカウンター関連属性の学習の詳細な説明

CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使...

JavaScript の高度なクロージャの説明

目次1. 閉鎖の概念追加の知識ポイント: 2. 閉鎖の役割: 3. 閉鎖例3.1 liをクリックする...

Vue はスクロール可能なポップアップウィンドウ効果を実装します

この記事では、スクロール可能なポップアップウィンドウ効果を実現するためのVueの具体的なコードを参考...

MySQLクエリの文字セットの不一致の問題を解決する方法

問題を見つける最近、仕事で問題が発生しました。MySQL データベースにテーブルを作成するときに、ラ...

Webpack パッケージング CSS 背景画像パスの問題に対する完璧なソリューション

vue コンポーネントのスタイル タグ内には、背景画像を使用する次の CSS コードがあります。 背...

Javascript配列の重複排除のいくつかの方法の詳細な説明

目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...