html - 为什么边框没有覆盖所有元素

Question

我使用 css 的边框属性。当我不添加溢出属性时，它不会覆盖 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

enter image description here

为什么在代码中加入溢出元素可以被修正？？？

Answer 1

据我所知，你有一个 float 元素问题，问题是。

A CSS clearfix is used to fix issues related to floating child elements within a parent element. Without a clearfix your child elements wont behave as you expect them too. When a HTML element is floated it can appear to sit outside its parent element and that means it wont adjust the parents height accordingly.

所以在你的例子中，内部元素是 float 元素。因此容器没有正确检测高度。

为什么当您使用 overflow:hidden 时它会起作用？

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements.

所以这可能是父级填充空间的原因。

阅读更多关于 CSS clearfixes 的信息 Read here和 here