css之浮动以及溢出的处理

原创 2016年08月28日 22:58:00

本篇主要介绍浮动属性、清除浮动 以及对于溢出的处理方式。

<!doctype html>
<html>
	<head>
		<title>Div+Css布局(浮动以及溢出处理)</title>
		<meta charset="utf-8">
		<style type="text/css">
			body{
			padding:0;
			margin:0;
			}
			.div{
				width:960px;
				height:600px;
				margin:0 auto;  /*居中处理*/
				background-color:#f1f1f1;
			}
			.left{
			float:left;  /*float:left是左浮动*/
			width:260px;
			height:460px;
			background:#ccc;
			}
			.right{
				float:right;
				width:690px;
				height:460px;
				background:#ddd;
			}
			.clear{
				clear:both;  /*clear:both清除浮动*/
			}
			.bottom{
			margin-top:10px;
			height:200px;
			width:960px;
			background:red;
			}
			.introduction{
				width:260px;
				height:120px;
				background:red;
				overflow:auto;  /*overflow溢出的处理方式*/
			}
		</style>
	</head>
	<body>
		<div class="div">
			<div class="left">
				<div class="introduction">
					今天天气真好啊!今天天气真好啊!今天天气真好啊!今天天气真好啊!今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
				</div>
			</div>
			<div class="right"></div>
			<div class="clear"></div>
			<div class="bottom"></div>
		</div>
	</body>
</html>



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

探究CSS属性overflow:hidden的作用:隐藏溢出和清除浮动

1、首先说一下overflow的定义:overflow属性规定当内容溢出元素框时发生的事情。2、overflow属性可能的值: 3、overflow:hidden的作用:1)、对超出尺寸进行裁切,也...

深入理解CSS溢出overflow

实例 设置 overflow 属性: div { width:150px; height:150px; overflow:scroll; } 亲自试一试 ...
  • bfboys
  • bfboys
  • 2016年10月13日 21:08
  • 527

CSS溢出处理

CSS定义中的overflow属性,封装了溢出处理的这个概念。在盒子模型中的代表标签的矩形对象,可以通过CSS样式来定义内容区域的高度与宽度,当这个内容无法容纳子矩形对象时,对于这些子矩形对象必须决定...

CSS实现div添加过长的英文字母或数字的内容显示一排而溢出时,进行自动换行

想用js动态往div添加内容,由于添加的内容过长,直接加进去的话,内容总是一行,会溢出到div外面,尝试了div中添加p、table、span等,都不行 后来查资料得知,在div css布局中,遇到...

深入理解:overflow:hidden——溢出,坍塌,清除浮动

深入理解:overflow:hidden——溢出,坍塌,清除浮动overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌。当某一个属性拥有这...
  • Hukaihe
  • Hukaihe
  • 2016年05月02日 22:08
  • 13620

CSS学习(五)——区块、浮动、定位、溢出、滚动条

区块 占据一整行的标记叫做区块。例如: ... ... 只要是区块,可以使用如下属性名称: 属性名称 设定值 说明 width 像素/百分比 区块的宽度 height 像素/百分比 区...

16-CSS区块、浮动、定位、溢出、滚动条

CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 1. CSS中区块的使用 属性名称 属性值 说明 width 像素或百分比 区块的宽度 ...

八种方法处理CSS浮动问题

清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样...

css清除浮动float的七种常用方法总结和兼容性处理

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...

CSS清浮动处理(Clear与BFC)

在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css之浮动以及溢出的处理
举报原因:
原因补充:

(最多只允许输入30个字)