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
セクションタグのテクニックがなぜそのように機能するのでしょうか?