溢出:隐藏以适应宽度 - 黑客 - 有替代方案吗?

时间:2014-07-31 15:20:41

标签: html css responsive-design overflow

是溢出:隐藏以适应黑客的宽度?我们有一个响应式网站,它使用溢出:隐藏与宽度:100%一起正确设置布局。但是,我们添加的任何新功能都存在问题。

例如,我们实现了自定义html下拉菜单。在容器外部展开时,下拉部分隐藏。

有没有一种正确的方法可以让它工作而不必重做整个页面的样式?

我试图描述的行为在本文的#4中使用 http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design/comment-page-2

1 个答案:

答案 0 :(得分:3)

overflow:hidden的目的不是清除浮动本身,而是通过建立新的block formatting context(BFC)流根控制子内容包含,BFC的一个特征是浮动包含。

More on BFCs from MDN

  

块格式化上下文是a的可视CSS呈现的一部分   网页。它是块框布局的区域   并且漂浮物彼此相互作用。

     

块格式化上下文包含元素内的所有内容   创建它也不是在创建的后代元素内   一个新的块格式化上下文。

     

块格式化上下文对于定位非常重要(请参阅   漂浮物)和清除浮体(见清楚)。定位规则   并且清除浮动仅适用于同一块内的事物   格式化上下文浮点数不会影响其他事物的布局   阻止格式化上下文,并清除只清除过去的浮动   相同的块格式化上下文。

从技术上讲,清除花车的方法是使用clear,这也意味着您不必依赖overflow:hidden使用,从而消除菜单裁剪问题。

例如,您可以在设置了clear的浮动元素后面添加一个元素 - 另一种方法是使用clearfix(另外,here)。 clearfix使用伪元素来应用相关的清除。

More on clear from MDN

  

clear CSS属性指定元素是否可以在旁边   在它之前的浮动元素或必须向下移动(清除)   在他们之下。

     

[...]

     

与清除有关的浮标是   早期浮动在同一块格式化上下文中。