CSS页面布局基础3——元素浮动

1.浮动(float)是基于CSS的现代Web设计用到的主要功能之一,可以用它来创建多累的网页布局,从无序列表创建导航工具条,不是用table而创建类似表格的对其方式等。

为使元素浮动到左边或者右边,并使后面的文本环绕它,可使用float属性,float属性的取值是:none(不浮动),left(向左浮动),right(向右浮动)。

使用float属性后,浮动的元素从正常文档流中脱离出来,同时对布局中的其他元素造成一定的影响。

浮动可以应用于任何元素。

我个人认为我们可以这样理解浮动(如有什么不对的,欢迎指正),在平常我们用到块级元素的时候,如果我们将两个块级元素嵌套在一个div中,在正常情况下,这两个块级元素会从上到下一次排列,即一个在上,一个在下,如果我们希望做到将这两个块级元素排列在一排(在这两个块级元素的宽度相加没有超过它们的父元素的宽度的情况下),我们可以用float属性对其进行设定。例子如下

<!DOCTYPE html>
<html>
<head>
	<title>浮动</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.all{
		width: 250px;
		height: 250px;
		background-color: #faa;
	}
	.div1{
		width: 100px;
		height: 100px;
		background-color: #7BBD53;
		margin-left: 10px;
		/*添加浮动*/
		float: left;
	}
	.div2{
		width: 100px;
		height: 100px;
		background-color: yellow;
		margin-left: 10px;
		/*添加浮动*/
		float: left;
		/*必须两处都添加浮动才能达到效果。*/
	}
	</style>
</head>
<body>
	<div class="all">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
	</div>
</body>
</html>

在没有添加浮动之前

添加向左浮动:

right的应用和left没有什么不同,主要是一个靠左,一个靠右。

上述例子向右浮动的效果:

文本环绕的效果:

<!DOCTYPE html>
<html>
<head>
	<title>围绕文本</title>
	<meta charset="utf-8" />
	<style type="text/css">
	span.text{
		width: 100px;
		margin:20px;
		background-color: #eea;
		font-weight: bold;
		float: right;
	}
	p{
		width: 300px;
		border: solid;
		border-width: 2px;
		border-color: #999;
		padding:30px;
	}
	</style>
</head>
<body>
	<p>
		<span class="text"> 华胥引华胥引华胥引</span>
		<span>这是一个发生在乱世的故事。城破之日,卫国公主叶蓁以身殉国,依靠鲛珠死而复生。当她弹起华胥调,便生死人肉白骨,探入梦境与回忆。幻术构成的曲谱里,尽是人生的辛酸与苦涩。而她与亡她国家的陈国世子,在一次幻境中相遇,身份两重,缘也两重。</span>
	</p>
</body>
</html>

效果:

2、浮动的几个基本行为:(1)当float不等于none引起元素浮动时,元素被视作块级元素(block-level),等同于设定display:block;

(2)当浮动一个文本类型元素时,必须制定该元素的width属性,如果不设置宽度,元素内容就会折叠到最可能的最小宽度。

(3)浮动元素停留在包含它的父级元素的内容区域内,不会穿过padding区域。

(4)浮动元素的margin元素不会重合。

(5)在源文档中,相邻的浮动元素不允许重叠。

(6)如果元素向同一方向浮动,每个后续的浮动元素必须向该方向移动,直到碰到父级元素的内边缘或者碰到前面的浮动元素。(这会导致多个浮动元素集聚在目标边缘)

(7)如果没有足够的空间让浮动元素肩并肩出现,第二个浮动元素将向下移动,直到有足够的空间来显示它而不覆盖第一个浮动元素。

3、限制浮动元素的顶部边缘的高度的规则

(1)浮动元素的顶部必须停留在它的父级元素的顶部内边缘之内。

(2)不被块级元素包含的浮动元素的顶部不能比前面的块级元素高。

(3)浮动元素的顶部不能比同在文档源中的前一个浮动元素高。

4、清除浮动:clear(只能用于块级元素)。在某些情况下,我们想浮动元素某一个边的区域被清除,后续的元素从容器的正常位置开始显示,这时候我们可以使用clear属性阻止一个元素出现在浮动元素的后面。

<!DOCTYPE html>
<html>
<head>
	<title>clear属性</title>
	<meta charset="utf-8" />
	<style type="text/css">
	img{
		float:left;
		margin-right: 10px;
	}
	h1{
		clear:left;
		top-margin:2em;
	}
	</style>
</head>
<body>
	<div style="width:300px;height:600px;">
		<p>
		<img src="tu.png">浮动是基于CSS的现代web设计用到的主要功能之一,它可以用来创建多列的网页布局、导航工具条等。
	</p>
	<h1>clear属性清除浮动元素</h1>
	<p>使用clear属性组织一个元素出现在元素的后面</p>
	</div>	

</body>
</html>

使用clear清除浮动的影响之前:

使用clear清除浮动的影响之后:

时间: 2024-10-14 13:11:01

CSS页面布局基础3——元素浮动的相关文章

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

css页面布局基础

去掉无需列表的原点list-style:none首字大写list-style:upper-coman变成小写list-style:lower-roman英文首字母大写alpha小写lower-alpha 虚线 boder: 1px dashed #58a  : 点线 boder:10px dotted #58a: 双实线 doble 定义四个方向的样式 boder-top:2px solid  red: right:2px dashed  red: botton: dotton        

第五章 CSS页面布局基础

1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的元素影响其相邻元素的位置. 2.块级元素 前后换行显示,默认状态下独占一行: 块级元素可以作为容器,包含其他行级元素.块级元素: 块级元素有一定高度和宽度,可以通过width和height来设置. div,table,p,h1-h6,ul,form等等 3.行级元素(内嵌元素.内联标签) 类似于文本

div+css页面布局-html代码

<html> <head> <title>div+css页面布局</title> <meta http-equiv="content-type" content="text/html" > <link rel="stylesheet" type="text/css" href="css/layout.css" /> </head&

html+css页面布局

http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟    W3C的职能:负责制定和维护Web行业标准    W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面

网页开发学习笔记九: css 页面布局

文档流 块元素独占一行 行内元素在一行上显示 自上而下 浮动 float 用法 float: left | right; 特点 浮动起来 不占位置(脱标) 如果多个盒子都使用了浮动, 会在一行上显示 尽量用 display: inline-block; 来转 行内块 作用 文本绕图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

CSS页面布局

<1>页面布局 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>标准的页面的布局首页</title> <style ty

浅谈div+css页面布局

解释:  DIV+CSS是Web设计标准,是一种网页布局方法.与传统的通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.“DIV+CSS”其实是错误的叫法,而标准的叫法应该是XHTML+CSS.因为DIV和table都是XHTML或HTML语言中的一个标记,而CSS只是一种表现形式. 方法: 在HTML文档中加入CSS.css是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术,也是

&lt;div+css页面布局课堂笔记&gt;11---页面布局网站首页设计实例__终极版(仿csdn首页)

1. firstPage.html文件: <span style="font-size:14px;"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html"> <title> 标准的页面布局首页 </title> <link rel="sty