divコンテンツオーバーフロー

先日問題が発生しました.コードはこのような階層です.

<div class="province">

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</div>

divの枠線を設定し、
ulの内容が枠内にあるようにするには、
divの高さを設定する必要があります.
しかし、ul内の内容は変化しており、内容が少ない場合はdivの高さには及ばない.
高さを設定しないと、ulの内容が枠の外に現れます.
もともとulの枠線を設定する必要がありました.考えてみれば、まず彼との関係が一番近い要素を設定しましょう.
フロントエンドがプロではない同僚にとって、cssスタイルシートを書くにはルールがあるほうがいいです.
cssスタイルに階層を指定します.前述の例のようにliのスタイルを定義します.province ul li{...}
書くスタイルには大体の順序があります.容器の大きさ(width,height......)、容器位置(left,margin......)、コンテナテキスト(color......)、その他
これにより、スタイルオーバーライドなどの問題をできるだけ避けることができます.