ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト https://www.jb51.net のホームページを開き、ソースコードを表示します。画面には HTML タグがいっぱいで、div が数十個以上あります。
HTML には、インライン要素 (インライン要素) とブロック要素の 2 種類の要素があります。これらをどのように理解していますか?

インライン要素は、折り返されず、サイズを調整できる要素です。たとえば、img フォントスパンなどです。Web サイトを構築する場合、内部のテキストコンテンツはインライン要素になります。
ブロック要素は、div p li など、コンテンツ、幅、高さに関係なく次の行に折り返される要素であり、通常は Web サイトのレイアウトで使用されます。
インライン要素とブロック要素の切り替えには、2 つの CSS プロパティ display: inline block を使用します。
ブロック要素を含むインライン要素の場合は、display:inline-block; を使用します。
inline は、インライン要素が含まれている場合にのみ使用されます。
インライン要素にはインライン要素を含めることができますが、ブロック要素を含めないようにしてください。
インライン要素とブロック要素は、ブロック要素内にネストできます。
ウェブサイトでのフローティングとは、親要素の境界、または前のフローティング要素の境界にドリフトすることを意味します。フローティングは、ul li を使用してメニューを作成するときに非常に便利ですが、div を使用してメニューを作成するときにも使用できます。

フロート:右;
右フロートは、フローティングボックスを元の位置から外すことができます。後続のフロートは密接に追従し、親要素の境界の右端にフロートして停止します。フロートを使用して Web サイトのメニューを作成するのが最適です。メニューのグループはすべてフロートするか、まったくフロートしないのが最適です。中央にフロートしないメニューが 1 つあると、奇妙な表示効果が現れます。スペースが十分に大きくない場合は、下方に適応できます。親要素は満たされるまでそのままにしておきます。

フロート:左;
float left と float right は、一方が左にフロートし、もう一方が右にフロートすることを除いて、実際には同じです。これらは、親の境界または前のフローティングブロックにフロートします。Web サイトで、ペアの div の 1 つが他の div よりも高い高さになっている場合、十分なスペースができるまで、2 番目のフローティング div はその背後に固定されます。
インライン要素の場合、フロートするとスタイルがブロック要素に設定され、幅と高さを設定できます。それ以外の場合、この2つの属性は無効です。ただし、ブロック要素であるにもかかわらず、行の右側の位置を放棄し、他のコンテンツを表示できます。たとえば、多くのWebサイトのレイアウトのテキストパッケージ画像は、この原則に基づいています///

フロートをクリアします。つまり、フローティング効果をクリアします。フローティングの鍵は、スペースを確保し、前のフローティングにすばやく追従することです。

<<: CSS ハート型読み込みアニメーションのソースコードの実装

>>: MySQL の挿入およびバッチステートメントのいくつかの例の詳細な説明