用途
新着
履歴
分類

CSS floatで子要素の高さを親要素へ反映させる

CSS floatで子要素の高さを親要素へ反映させる

HTML 親要素にクラスを指定します。

<ul class="clearfix">
    <li>子要素</li>
    <li>子要素</li>
</ul>

そして以下のCSS をクラスにあてます。

.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

やっている内容は親要素の中の最後に、もう一つ要素を追加し、clear:bothを実装しています。

現在はdisplay:flexを使うとだいぶ便利なので、そちらも検討しましょう。

公開 2019-08-04 22:45:51
このページの二次元コード
CSS floatで子要素の高さを親要素へ反映させる

人気のサンプル

search -  category -  about
© 2024 kipure
Top