-1

overflow: hiddenコンテナの崩壊問題を解決するテクニックは section タグだけに有効ですか?

<style>
aside, article, section, header, footer, nav {
    display: block;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: rgb(108,135,178);
}
body {
    width: 600px;
    background: #fff;
    margin: 0 auto;
    font: 90% Georgia, "Times New Roman", Times, serif;
}
div {
    width: 50px;
    height: 50px;
    padding: 50px;
}
section {
    background: rgb(178,155,107);
    border: 1px solid black;
    padding: 10px;
    overflow:hidden;
    width: 580px;
}
.one {
    background: rgb(207, 255, 245);
    float: left; 
}
.two {
    background: rgb(101,209,255);
    float: left;
}
.three {
    background: rgb(255, 231, 181);
    float: left;
}

</style>
</head>
<body>
<section>
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>
</body>
</html>

この例を参照してください オーバーフローを使用します: ここに非表示にすると、コンテナの崩壊の問題が解決します

しかし、このように変更するとどうなりますか

<style>
aside, article, section, header, footer, nav {
    display: block;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: rgb(108,135,178);
}
body {
    width: 600px;
    background: #fff;
    margin: 0 auto;
    font: 90% Georgia, "Times New Roman", Times, serif;
}
div {
    width: 50px;
    height: 50px;
    padding: 50px;
}

.containerElement {
    background: rgb(178,155,107);
    border: 1px solid black;
    padding: 10px;
    overflow:hidden;
    width: 580px;
}
.one {
    background: rgb(207, 255, 245);
    float: left; 
}
.two {
    background: rgb(101,209,255);
    float: left;
}
.three {
    background: rgb(255, 231, 181);
    float: left;
}

</style>
</head>
<body>

<div class="containerElement">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
</body>
</html>

はみ出した部分が隠れるようになりました。これがoverflow: hidden動作するはずの方法です。overflow: hiddenセクションタグのテクニックがなぜそのように機能するのでしょうか?

4

1 に答える 1

1

あなたの問題はcontainerElementdiv であるため、 のスタイル ルールdivが使用され、 によって上書きされていることcontainerElementです。

divスタイル ルールでは が指定さheight: 50px;れているため、コンテナーは静的な高さ 50px に設定されています。

一般的な経験則として、CSS を使用してdivタグのスタイルを設定すると、多くの問題が発生します。に変更divすると.one, .two, .three、必要な結果が得られます。

于 2012-10-15T03:10:00.690 に答える