是溢出:隐藏以适应黑客的宽度?我们有一个响应式网站,它使用溢出:隐藏与宽度:100%一起正确设置布局。但是,我们添加的任何新功能都存在问题。
例如,我们实现了自定义html下拉菜单。在容器外部展开时,下拉部分隐藏。
有没有一种正确的方法可以让它工作而不必重做整个页面的样式?
我试图描述的行为在本文的#4中使用 http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design/comment-page-2
答案 0 :(得分:3)
overflow:hidden
的目的不是清除浮动本身,而是通过建立新的block formatting context(BFC)流根控制子内容包含,BFC的一个特征是浮动包含。
块格式化上下文是a的可视CSS呈现的一部分 网页。它是块框布局的区域 并且漂浮物彼此相互作用。
块格式化上下文包含元素内的所有内容 创建它也不是在创建的后代元素内 一个新的块格式化上下文。
块格式化上下文对于定位非常重要(请参阅 漂浮物)和清除浮体(见清楚)。定位规则 并且清除浮动仅适用于同一块内的事物 格式化上下文浮点数不会影响其他事物的布局 阻止格式化上下文,并清除只清除过去的浮动 相同的块格式化上下文。
从技术上讲,清除花车的方法是使用clear
,这也意味着您不必依赖overflow:hidden
使用,从而消除菜单裁剪问题。
例如,您可以在设置了clear
的浮动元素后面添加一个元素 - 另一种方法是使用clearfix(另外,here)。 clearfix使用伪元素来应用相关的清除。
clear CSS属性指定元素是否可以在旁边 在它之前的浮动元素或必须向下移动(清除) 在他们之下。
[...]
与清除有关的浮标是 早期浮动在同一块格式化上下文中。