css overflow / float [第九天]
文章目录
overflow
这里overflow是对 重学前端 详解表单 / 详解input / 浏览器私有前缀的作用（第六天） 的补充
overflow 属性用于控制内容溢出元素框时显示的方式。
注意：
overflow 属性只工作于指定高度的块元素上。
在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。
float
Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。（浮动元素是半脱离文档流的，不像position:absolute、fixed; 完全脱离文档流，无法覆盖文字，float设计也是为了产生图片的文字缠绕！）
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它；浮动元素之前的元素将不会受到影响。
实例：
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
这是一些文本。这是一些文本。这是一些文本1。
这是一些文本。这是一些文本。这是一些文本2。
这是一些文本。这是一些文本。这是一些文本3。
这是一些文本。这是一些文本。这是一些文本4。
这是一些文本。这是一些文本。这是一些文本5。
这是一些文本。这是一些文本。这是一些文本6。
<br/>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本7。
这是一些文本。这是一些文本。这是一些文本8。
这是一些文本。这是一些文本。这是一些文本9。
这是一些文本。这是一些文本。这是一些文本10。
这是一些文本。这是一些文本。这是一些文本11。
这是一些文本。这是一些文本。这是一些文本12。
这是一些文本。这是一些文本。这是一些文本13。
这是一些文本。这是一些文本。这是一些文本14。
这是一些文本。这是一些文本。这是一些文本15。
这是一些文本。这是一些文本。这是一些文本16。
</p>
</body>
运行结果：
注意 ：
彼此相邻的浮动元素，如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性，clear 属性指定元素两侧不能出现浮动元素。
注意：
哪边浮动，那么就清除哪边，如果不清楚，可以直接使用both！
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:left;
/*clear:right就不行*/
/*clear:both;*/
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
代码测试： 菜鸟教程
扩展
如果 .text_line 去掉 clear，然后放大网页，会出现该现象：
为什么第二行会跑到前两张图片的右边？
因为 .text_line 在float元素之后，float是半脱离文档流，虽然 .text_line 占据了其空间，但是 float 并不能覆盖文字，图片所以把文字挤到了右边！
那图片为什么不接着加到后面？而是显示文字？
这是因为后面的空间不足以再放一张图片，把 .thumbnail 的 width设置为60px时，会产生这样的效果（再次说明了float无法覆盖文字）：
上一篇： bootstrap排版样式