CSS解说（二）

最新推荐文章于 2023-04-18 14:37:54 发布

原创最新推荐文章于 2023-04-18 14:37:54 发布 · 620 阅读

0 ·

CC 4.0 BY-SA版权

前端大集合专栏收录该内容

112 篇文章

订阅专栏

浮动（float）

普通流（normal flow）

也称标准流或文档流。我们说的网页布局的核心，就是用CSS来摆放盒子位置，那么如何把盒子摆放到合适的位置？

CSS的定位机制有3种：普通流、浮动、定位。

HTML语言中，遵循的就是普通流。普通流实际就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列。

浮动（float）

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现”环绕“图片的效果。后来，我们发现浮动有个很有意思的事情，就是让任何盒子可以一行排列，因此我们就慢慢偏离主题，用浮动的特性来布局，虽然可以将块元素转换为行元素（display：line；）来实现盒子的一行排列，但是这样的效果是盒子和盒子之间会有空隙，而且很难消除或几乎不可以消除。

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

通俗点讲就是，浮指漂浮的概念，漂在标准流的上面，压住标准流。

语法格式为: 选择器{ float：属性值；}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动详细内幕特性

漂浮脱离标准流，不占位置，会影响标准流，浮动只有左右浮动。

浮动的话首先创建包含块的概念（包裹），就是说，浮动的元素总是找离它最近的父元素（盒子）对齐，但是不会超出内边距padding的范围，即紧靠内边距padding，或者说子盒子浮动是不会压住父盒子的border、padding、margin，而是紧靠padding。

浮动首先要添加标准流父盒子，即在一个标准流父盒子中进行浮动，以免浮动后遮挡下面的标准流内容。

浮动的元素排列的位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐，如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能各盒子都在一行显示
元素添加浮动后，元素会具有行内块的特性，即在一行显示，元素的大小取决于定义的宽度或由内容决定。若为行内元素如span添加浮动后，具有行内块的特性。同理块级元素添加浮动之后，具有行内块的特性。
浮动根据元素书写的位置来显示相应的浮动，如float：left；

总结：浮动（浮漏特）

一句话总结浮动：浮动的主要目的就是为了让多个块级元素一行内显示

浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面
漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子
特：特别注意，这是特殊的使用，有很多的不好处，使用要谨慎

版心和布局流程

可以发现报纸经过了合理的排版，版面依然清晰、易读，同样在制作网页时，也要对网页进行排版。

”版心“指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度有960px、980px、1000px、1200px。

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

确定页面的版心（可视区，可设置为1200px）
分析页面中的行模块，以及每个行模块中的列模块
制作HTML页面，CSS文件
CSS初始化（即通配符设置内外边距为0，因为很多元素都默认自带边距如body）。然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

两列左窄右宽型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0px;
				padding: 0px;
			}
			.head-float1,.head-float2,.content-first,.foot-num1{
				width: 960px;
				margin: 0 auto;
				text-align: center;
				margin-bottom: 8px;
			}
			.head-float1{
				height: 80px;
				line-height: 80px;
				background-color: #696969;
			}
			.head-float2{
				height: 120px;
				line-height: 120px;
				background-color: #9C9C9C;
			}
			.content-first1{
				width: 300px;
				height: 500px;
				line-height: 300px;
				background-color: #FF7F50;
				float: left;
			}
			.content-first2{
				width: 652px;
				height: 500px;
				line-height: 300px;
				background-color: #FF4400;
				float: right;
			}
			.content-first{
				height: 500px;  /*必须给父盒子设置高度，否则没有高度，则认为父盒子无高度，那么尾部盒子会跑上来*/
			}
			.foot-num1{
				height: 60px;
				line-height: 60px;
				background-color: #BDB76B;
				float: none;
			}
		</style>
	</head>
	<body>
		<div class="head-float1">头部导航栏</div>
		<div class="head-float2">头部耳机栏</div>
		<div class="content-first">
			<div class="content-first1">左侧内容</div>
			<div class="content-first2">右侧内容</div>
		</div>
		<div class="foot-num1">尾部</div>
		
	</body>
</html>