Question

我使用css的border属性。当我不添加溢出属性时，它不会覆盖id内容的所有元素。

#contents{border-radius: 10px; border: 1px solid red;overflow:hidden;}

<div id="contents">
    				<aside>
    					<nav>
    						<ul>
    							<a class="btn-danger" href="">Home Page</a>
    							<a class="btn-danger" href="">Main Settings</a>
    							<a class="btn-danger" href="">Sections</a>
    							<a class="btn-danger" href="">Pages</a>
    							<a class="btn-danger" href="">Comments</a>
    							<a class="btn-danger" href="">Library</a>
    						</ul>				
    					</nav>
    				</aside>
    				<section id="page">
    					<p>Hello </p>
    				</section>
    </div>

enter image description here

为什么在代码中添加溢出元素可以更正???

Answer 1

从我所看到的，你有一个浮动元素问题，问题是。

CSS clearfix用于修复与浮动子项相关的问题父元素中的元素。你的孩子没有明确的修复元素不会像你期望的那样表现出来。当HTML元素是浮动它似乎位于其父元素之外，这意味着它不会相应地调整父母的身高。

所以在你的情况下，内部元素是浮动元素。因此，容器没有正确检测高度。

使用overflow:hidden后，为什么会有效？

溢出方法依赖于在a上设置溢出CSS属性父元素。如果此属性设置为自动或隐藏在父元素，父元素将展开以包含浮点数，有效地清除后续元素。

所以这可能是父母填补空间的原因。

详细了解CSS clearfixes Read here和here

为什么边界不覆盖所有元素

1 个答案: