解决 css float 的越界问题

今天解决了一个问题,困扰很久的问题。

Problem

cssfloat

如下图,如果 sidebar 是 float: left,然后 main content 是 margin: left 的 static 定位,当 main content 的子元素使用了 clear 的时候,就会把外层的 sidebar 浮动也清除掉,就想第二幅图那样,这样的结果不是我们想要的。

然后就 stackoverflow 到了如下解法:

http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

关键解法如下:

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden. */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

加入上述的容器样式,可以让 clear 不穿越到容器之外。

具体原理我也不懂,暂且先拿来主义,最起码解决了长久以来的隐痛。。


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2014/11/css-float.html【解决 css float 的越界问题】

发表评论

电子邮件地址不会被公开。 必填项已用*标注