overflow

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have a website here . Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden . In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the html or body tags. Even if I set the viewport to a specific width in the : The site expands to the 1100px but still has the whitespace beyond the 1100. What am I missing? How do I keep

In short: Basically, I just want to know why overfow:hidden explands the container containing a floated item. Shouldnt it hide the overflowing element like in this image http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png why does it do this instead http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png Long version: Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of flow in relation to other block elements. And inline elements wrap around the floated elements to acknowledge

You can reproduce this by running this test case . The results are shown in the screenshot below. The issue is that on Firefox, when adding a overflow: hidden on the "block" (with grey background in the screenshot), the block stop being aligned as I'd like it to be: instead of the baseline of the text in the block being align to the the baseline of the parent box, it is as if the bottom of the block was aligned on the baseline of the parent box. As you can see in the screenshot, this doesn't happen with Chrome. Is this a Firefox bug? How to get the expected result on Firefox (baseline

本文讲了BFC的概念是什么； BFC的约束规则；咋样才能触发生成新的BFC；BFC在布局中的应用：防止margin重叠(塌陷,以最大的为准)； 清除内部浮动；自适应两（多）栏布局。 1. BFC 是什么？ Block fomatting context = block-level box + Formatting Context Box: 　　Box即盒子模型； block-level box即块级元素 display属性为block, list-item, table的元素，会生成block-level box；并且参与 block fomatting context； inline-level box即行内元素 display 属性为 inline, inline-block, inline-table的元素，会生成inline-level box。并且参与 inline formatting context； Formatting context 　　Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline