前端布局知识点(1)——从overflow属性看浮动

完成了 百度前端学院2015的task1 后,感觉自己之前学习CSS以及前端布局确实不太全面,有很多知识点现在才接触到,而且也很久没有用过CSS写前端布局了。查漏补缺,总结了几个以前没有注意的知识点:overflow、负边距、圣杯布局和双飞翼布局。一开始想把所有知识点总结成一篇,写着写着发现较短的篇幅不足以把这些都总结清楚,所以还是每个知识点单写一篇。

顺便推荐 学习CSS布局,很好的布局学习资料,值得反复学习。用詹俊老师的话来说就是,好文不妨一看再看!

探究由来

task1中有一道题是这样的:实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化。很快写出代码如下:

html代码:

1
2
3
4
5
6
7
8
9
10
11
<div class="red task5">
<div class="blue bfloat">1</div>
<div class="blue bfloat">2</div>
<div class="blue bfloat">3</div>
<div class="blue bfloat">4</div>
<div class="blue bfloat">5</div>
<div class="blue bfloat">6</div>
<div class="blue bfloat">7</div>
<div class="blue bfloat">8</div>
<div class="blue bfloat">9</div>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.task5{
margin-top: 10px;
height: 100px;
}
.bfloat{
height: 50px;
width: 90px;
margin: 10px;
float: left;
}

这里说一声,根据 OO CSS 的思想,结构和样式应该相互独立(不太了解 OO CSS 的话可以看一下我之前的博文 对几个前端相关概念的理解——OO CSS、语义化、CSS hack)。尽管对于这种小 Demo,OO CSS显得不实用且有些累赘,我还是坚持去实现。因此我单独写了 red 和 blue 两个 class 来控制皮肤。

以上代码的效果图:

可以看到,效果图中红色容器的高度没有随着蓝色容器的行数的变化而变化,与我们理想的效果有些差距。这是因为我们在task5这个class中写死了容器的高度,而设置了浮动的蓝色容器脱离了红色容器,行数的变化无法再影响到红色容器的高度。从这里我们可以看出,所谓“浮动”不只是平面上的浮动,而是一个立体的浮动。当然,如果不写高度的话连红色容器都看不到。那怎么解决这个问题呢?我当时没有想到好的解决方法。查看了别人的代码后,发现是要把 task5 这个 class 中高度删掉,再加一行:

overflow: hidden;

overflow 属性

overflow 属性规定当内容溢出元素框时发生的事情。这个属性的默认值为 visible,这时内容不会被修剪,会呈现在元素框之外,就像之前的效果图一样;而值为 hidden 时,内容会被修剪,并且其余内容是不可见的。也就是说,如果这时height属性还设置了定值的话,超出这个定值的部分不可见。这个时候显示的效果如下(height: 100px):

删掉height属性后,overflow: hidden 在这个案例的真正用途是清除浮动。这里清除的是立体的,可以理解为z轴上的浮动。因此,蓝色容器的高度现在可以受其内部,也就是红色容器的总体高度影响。现在显示的效果是符合我们要求的,实际效果图如下:

overflow 属性的值还可以为 scroll 和 auto。值为 scroll 时,内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。而值为 auto 时,如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。两者区别是如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

浮动元素特点

17.04.14补充:摘自 回归CSS标准之Float

float 属性被设置为非 none 的元素:

  1. 元素被视作块级元素,相当于 display 设置为“block”;
  2. 元素具备包裹性,会根据它所包含的元素实现宽度、高度自适应;
  3. 浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过 z-index 属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素;
  4. 浮动元素前后的行内元素环绕浮动元素排列;
  5. 浮动元素之前的元素如果也是浮动元素,且方向相同,它会紧跟在它们后面;父元素宽度不够,换行展示;
  6. 浮动元素之间的水平间距不会重叠;
  7. 当包含元素中只有浮动元素时,包含元素将会高度塌陷;
  8. 浮动元素的父元素的非浮动兄弟元素,忽视浮动元素存在,覆盖浮动元素;
  9. 浮动元素的父元素的浮动兄弟元素,会跟随浮动元素布局,仿佛处在同一父元素中。

参考资料

CSS overflow 属性

CSS - 清除浮动(clearfix hack)

17.02.07更新:

那些年我们一起清除过的浮动 一文中将 overflow: hidden 所带来的清除浮动的效果称为“闭合浮动”,以区别于 clear: left|right|both|none 。我们通过闭合浮动来解决 wrap 高度塌陷的问题。

17.04.07更新:

Clear Float 介绍了解决浮动带来的高度塌陷问题的另外两种方法:“clear:both”和“clearfix”。

回归CSS标准之Float 百度EFE的文章,加深对 float 的理解。