子divをfloatに設定した後、親divが自動的に開けなくなる問題の解決方法。

この記事で共有する内容は、子divにfloatを設定すると、親divが自動的に開かなくなるという内容です。 次に、具体的な内容を見てみましょう。皆さんのお役に立てれば幸いです。

理由: 内側の p は float:left の後、clear:both と display:block のスタイルを失うため、外側の p は開かれません。

以下にいくつかの解決策を示します (親 p のクラスが "container" であると仮定します):

• 方法 1. 疑似クラスを使用します

container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一种撑开办法，底下会有部分被遮到，所以添加这行，就完美了*/
}

• 方法 2. 開かない原則は、オーバーフローは目に見えないので、親 p に overflow:auto; を追加するだけです。IE の場合は、_height:1%;

方法 3 を使用して、最後に子 p を追加します。 : <p class= "clear"></p>
スタイルを設定します。clear:both:0%; }

• <p class="clear"></p>
  设置样式.clear{clear:both; font-size:0; height:1%;}

• 方法4、可以设置父p的高度（也就是手动撑开，不灵活）；

• 方法5、直接给父p设置 display: inline-block; 这样也自动撑开

• 方法6、直接给子p设置 display: inline-block; 也能自动撑开，但是排版问题有待研究学习

• 方法7、从网上还发现了一种方法，给父p增加属性：display:table;

• 方法8、 子p浮动我就套不住你?OK,我让父p也浮动: 父p设置 float: left; 方法 4. 親 p の高さを設定できます (つまり、柔軟性がありませんが手動で拡張します)。

方法 5. display: inline- を直接設定します。 block; を親 p に設定すると、自動的に展開されます。

方法 6. display: inline-block; を子 p に直接設定することもできます。自動的に開かれますが、植字の問題は研究して研究する必要があります。

方法 7. 私もインターネットから見つけました。この方法は、親 p: display:table; に属性を追加します。

🎜方法 8. 子 p がフロートするとキャッチできませんか? OK、親 p もフロートさせます: Parent p settingsfloat: left; もできます 🎜🎜🎜🎜 : 🎜🎜🎜tinymceとprismを使って強調表示されたコードと中国語の設定方法のプロセスを実装する🎜🎜🎜🎜HTML要素を動的に生成し、要素に属性を追加する方法その方法の紹介(コード付き)🎜🎜

以上が子divをfloatに設定した後、親divが自動的に開けなくなる問題の解決方法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。