在我的网页上,我有一个徽标和一个菜单,组成标题元素和一个英雄单位.
现在我想给它一些底部边距,以便之间有足够的负空间
标题和英雄单位,但这个底部边距(100px)不适用.
如果我试图从英雄单位给出最高边距,同样的事情.
现在我想给它一些底部边距,以便之间有足够的负空间
标题和英雄单位,但这个底部边距(100px)不适用.
如果我试图从英雄单位给出最高边距,同样的事情.
.header { width: 95%; margin: 20px auto 100px; }
这是我的工作样本JS BIN
解决方法
在其下添加div:
.someclass { clear: both; }
有助于.但更容易的是:
.header { width: 95%; margin: 20px auto 100px; overflow: hidden; }
如果你添加溢出:隐藏;尽管它们被浮动,但浏览器将被迫计算其中元素的大小.计算大小时,它也知道从哪里开始边距底部.
One more popular uses of setting overflow,strangely enough,is float clearing. Setting overflow doesn’t clear the float at the element,it self-clears. This means that the element with overflow applied (auto or hidden),will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing),assuming that the height isn’t declared.
在这种情况下,auto和hidden之间的区别在于隐藏,它将隐藏溢出的所有内容,当它没有足够的空间时,并且使用auto,它将创建一个滚动条.
编辑:
.header:after { clear: both; height: 0; width: 100%; content: ''; display: block; }
原文地址:https://www.jb51.cc/html/227775.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。