ブロックフォーマッティングコンテキスト

Outcome：Complete the task with ブロックフォーマッティングコンテキスト (Block Formatting Context)。 User context：古い記事カードでは、浮動画像により背景が崩れ、テキストが近くのフロートを回り込む。`display: flow-root` を追加すると、画像を含むBFCが作成され、望ましい子のマージンを維持できる。`overflow: hidden` とは異なり、フォーカスリングを切り落とすことはない。 Design concept to apply：ブロックフォーマッティングコンテキスト (Block Formatting Context)。 Why it fits：コンポーネントが浮動要素を保持する必要がある場合、またはブロックレイアウトの効果を内部に保持してコンテンツを切り取らないようにする場合は `flow-root` を使用してください。 Do not use it when：自動フロート修正として `overflow: hidden` を使用しないでください。コンテンツ、影、ポップオーバー、またはフォーカスマークが切り取られる可能性があります。 Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：きちんとした書類でも、まだドラフトやリリース候補、あるいは最終版かもしれません。ステータスや、ブラウザやプラットフォームの対応状況を確認しましょう。 Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.