css overflow / float [第九天]

文章目录

  • overflow
  • float
    • 元素怎样浮动
    • 清除浮动 - 使用 clear
    • 扩展

overflow

这里overflow是对 重学前端 详解表单 / 详解input / 浏览器私有前缀的作用(第六天) 的补充

overflow 属性用于控制内容溢出元素框时显示的方式
css overflow / float [第九天]_第1张图片
注意:
overflow 属性只工作于指定高度的块元素上

在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

float

Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。(浮动元素是半脱离文档流的,不像position:absolute、fixed; 完全脱离文档流,无法覆盖文字,float设计也是为了产生图片的文字缠绕!)

Float(浮动),往往是用于图像,但它在布局时一样非常有用。
css overflow / float [第九天]_第2张图片

元素怎样浮动

元素的水平方向浮动,意味着元素只能左右移动而不能上下移动

一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止

浮动元素之后的元素将围绕它;浮动元素之前的元素将不会受到影响。

实例:

<body>
<p>在下面的段落中,我们添加了一个 <b>float:rightb> 的图片。导致图片将会浮动在段落的右边。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>

运行结果:
css overflow / float [第九天]_第3张图片
注意
彼此相邻的浮动元素,如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻

清除浮动 - 使用 clear

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性,clear 属性指定元素两侧不能出现浮动元素

注意:

哪边浮动,那么就清除哪边,如果不清楚,可以直接使用both!

实例:


<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,然后放大网页,会出现该现象:
css overflow / float [第九天]_第4张图片
为什么第二行会跑到前两张图片的右边?

因为 .text_line 在float元素之后,float是半脱离文档流,虽然 .text_line 占据了其空间,但是 float 并不能覆盖文字,图片所以把文字挤到了右边!

那图片为什么不接着加到后面?而是显示文字?

这是因为后面的空间不足以再放一张图片,把 .thumbnail 的 width设置为60px时,会产生这样的效果(再次说明了float无法覆盖文字):
css overflow / float [第九天]_第5张图片

你可能感兴趣的:(重学前端2,css,css,overflow,float,经验分享,其他)