在CSS中,overflow:hidden在父容器上设置,以使其随其浮动子代的高度扩展。
overflow:hidden
但是,当与margin: auto… 结合使用时,它还具有另一个有趣的功能。
margin: auto
如果上一个同级是一个浮动元素,它将实际上并列出现。也就是说,如果同级float:left容器是,则容器float:none overflow:hidden将显示在同级容器的右侧,没有换行符- 就像它在正常流中浮动一样。如果先前的兄弟姐妹是float:right容器,那么容器将出现在兄弟姐妹的左侧。调整此容器的大小将准确地显示它在浮动元素之间的中心。说,如果你有两个以前的兄弟姐妹,一个float:left其他float:right,容器将出现在中心插图中的两项。
float:left
float:none overflow:hidden
float:right
所以这是 问题所在 …
如何在不遮盖孩子的情况下保持那种布局?
在整个网络上进行谷歌搜索为我提供了如何clear:both扩展和扩展容器的方法…但是我找不到任何其他解决方案来保持左/右前一个孩子居中。如果您制作容器,overflow:visible则容器会突然忽略浮动元素的布局流程,而是分层显示在浮动元素的顶部。
clear:both
overflow:visible
所以 问题 :
我必须有一个容器overflow:hidden来保留布局…
我怎样才能做到不让孩子蒙面?我需要让孩子相对于容器外部的父对象绝对定位。
要么
我如何overflow:visible才能绝对地将一个孩子相对于其父对象放置在容器之外…还可以保留同级的float-like-layout- flow?
您可以使用clearfix进行相同的“布局保留” overflow: hidden操作。
clearfix
overflow: hidden
.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* IE < 8 */
将class="clearfix"类添加到父级,然后删除overflow: hidden;
class="clearfix"
overflow: hidden;