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学习(五)——区块、浮动、定位、溢出、滚动条

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

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

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

关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

HTML适应不同分辨率的屏幕,其中关于float的问题。
  • u012843021
  • u012843021
  • 2015年07月14日 17:44
  • 2241

HTML CSS的兼容性问题、IE6BUG之浮动与定位篇

IE6下内容撑开设置宽高———————————————————-在IE6下,内容会撑开设置好的宽高 例如,给固定宽度的wrap_div下放left_div、right_div两个div并浮动, ...
  • u014420383
  • u014420383
  • 2015年08月08日 16:45
  • 1193

5种css图片浮动效果

给平淡的站点带来活力  hover效果能给网页增加一些动态效果,并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯...
  • yuzhongkai
  • yuzhongkai
  • 2016年04月09日 15:14
  • 799

CSS浮动溢出解决方法

未解决前代码      【安全库存预警】【01.01.00000002】剩余库存12,安全库存15,请尽快补充!2017-11-25 07:00:01    【安全库存预警】【01.01.00000...
  • owgco
  • owgco
  • 2017年11月28日 11:37
  • 8

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

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

CSS浮动规则详解(推荐)

CSS中float是在一系列详细规则控制浮动元素的摆放位置,可以想象成一个氢气球在封闭盒子里漂浮的平面图。具体的规则有如下几点: 1、浮动元素的左边(右边)外边界不能超出其包含块的左边(右边)的内边...
  • dyllove98
  • dyllove98
  • 2013年05月24日 21:18
  • 1847

css浮动基本规则

说到元素的浮动,首先要明确一个概念就是包含块(containing block)。所谓浮动元素的包含块,就是其最近的块级祖先元素。我们后面会举例来说明。这里关于浮动的问题,主要有以下几点: 1、浮动元...
  • a153375250
  • a153375250
  • 2016年06月11日 21:33
  • 4955

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

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...
  • promiseCao
  • promiseCao
  • 2016年10月09日 23:04
  • 13135
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css之浮动以及溢出的处理
举报原因:
原因补充:

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