私はCSSで私を混乱させるいくつかの振る舞いに出くわしました。2つのブロック要素があり、最初の要素が右に浮いているとしましょう（jsfiddle）：
オーバーフロープロパティが非浮動要素で非表示に設定されている場合、その要素は浮動要素の幅jsfiddleに対応するために縮小されます。
実は問題ないのですが、なぜそうなっているのか知りたいです。私が問題にしているのは、オーバーフローが非表示に設定された後、width非浮動要素のがに設定されている次の場合100%です。これをIE9、Firefox 14、Opera 12、Chrome 20、Win7のSafari 5でテストしましたが、Firefox show（jsfiddle）
を除くすべてのファイルでテストしました。
私が望んでいたことと期待したこと、そしてFirefoxが示していることは、上の最初の写真と同じです。それで、なぜこれがすべて起こっているのかについて誰かが光を当てることができますか？
定義によると、「コンテナ要素自体が他の何かに含まれている場合、フロートされたdivはコンテナの右マージンに配置されます。」
ケース1：.container利用可能なスペース全体をカバーしています。は、 （ここでは.contentは長方形の形ではありません）を.content除いてすべてのスペースを使用しています。これがフローティングです。.floatその空間をカバーするために実際に溢れています。そのデフォルトの動作。
ケース2：.contentオーバーフローを非表示にするように指示します。したがって、デフォルトの動作として以前に行っていたオーバーフローを非表示にします。
ケース3：.contentに、親の全幅を取るように指示します。つまり.container、overflow：hiddenを無視し、スペースを埋めるために拡張するだけです。
あなたがoverflow：hiddenの奇妙な振る舞いを疑問に思っているなら、この記事をチェックしてください