この質問に対する答えは、「入力をスパンでラップし、スパンに適用overflow: hidden
する」です。
これが機能するのは、スパンの新しいブロック フォーマット コンテキストを確立し、float 用のスペースを作るためです。
overflow: hidden
入力に直接適用してもうまくいかないのはなぜですか? 入力をスパンでラップする必要があるのはなぜですか?
この質問に対する答えは、「入力をスパンでラップし、スパンに適用overflow: hidden
する」です。
これが機能するのは、スパンの新しいブロック フォーマット コンテキストを確立し、float 用のスペースを作るためです。
overflow: hidden
入力に直接適用してもうまくいかないのはなぜですか? 入力をスパンでラップする必要があるのはなぜですか?
Overflow: hidden
コンテナー要素に適用され、コンテナーの境界線の定義された制限を超えて拡張されたコンテンツを管理する方法をブラウザーに指示します。overflow: hidden を入力に直接追加しても、入力には位置や比率に影響を与える子要素がないため、実際には何も追加していません。
オーバーフローを設定しても、要素のフロートはクリアされず、 自動的にクリアされます。つまり、オーバーフローが適用された要素 (自動または非表示) は、高さが宣言されていないと仮定して、(折りたたまれるのではなく) フロートされた子要素を内部に含めるのに必要な大きさに拡張されます。