-1

overflow: hidden解决容器崩溃问题的技术是否仅适用于部分标签？

<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: hiddensection标签中的技术怎么会这样工作？

4

1 回答 1

1

您的问题是这containerElement是一个 div，因此正在使用样式规则div，然后被containerElement.

div样式规则指定，因此height: 50px;容器被设置为 50px 的静态高度。

作为一般经验法则，使用 CSS 来设置div标签样式会给您带来很多问题。如果您更改div为.one, .two, .three，您将获得您想要的结果。

于 2012-10-15T03:10:00.690 回答