『HTML&CSS』浮动

最新推荐文章于 2024-07-18 22:26:13 发布

爱喝可乐的炸鸡

最新推荐文章于 2024-07-18 22:26:13 发布

阅读量468

点赞数

分类专栏：『HTML&CSS』文章标签：文档流浮动简单布局

本文链接：https://blog.csdn.net/sss_0916/article/details/102513760

版权

『HTML&CSS』专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本片博客会对文档流进行简单介绍，然后会介绍浮动相关问题，然后进行一个简单布局的小练习。

文档流

首先什么是文档？

文档指的就是网页，每个页面都是一个文档。

什么是文档流？

文档流指的是网页中的一个位置，网页是一个多层结构，是一层一层摞起来的，我们只能看到最上面一层；
文档流就是网页中的一层，处在网页的最底层，相当于地基；
我们所创建的元素默认都早文档流中。

元素在文档流中的特点

块元素在文档流中的特点：

块元素在文档流中会独占一行，块元素会自上向下排列；
块元素在文档流中默认宽度时父元素的100%；
块元素在文档流中的高度默认是被内容撑开。

内联元素在文档流中的特点：

内联元素在文档流中只占自身大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则会换到下一行，继续自左向右；
内联元素的宽和高默认都是被内容撑开。

浮动

首先我们来看一个问题：

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>浮动</title>
		<style type="text/css">
			.box1 {
				width: 100px;
				height: 100px;
				background-color: #bfa;
			}

			.box2 {
				width: 100px;
				height: 100px;
				background-color: orange;
			}

			.box3 {
				width: 100px;
				height: 100px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>

在这里插入图片描述
我们知道，块元素在文档流中是自上向下排列，如果我们想要让上述三个块元素水平排列，应该怎么做呢？

既然块元素在文档流中是自上向下排列的，我们让块元素脱离文档流就可以了；
使用float样式可以使元素浮动，从而脱离文档流；
可选值：none（默认值，元素默认在文档流中排列）、left（元素会立即脱离文档流，向页面左侧浮动）、right（元素会立即脱离文档流，向页面右侧浮动）；

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>浮动</title>
		<style type="text/css">
			.box1 {
				width: 100px;
				height: 100px;
				background-color: #bfa;
				float: left;
			}

			.box2 {
				width: 100px;
				height: 100px;
				background-color: orange;
				float: left;
			}

			.box3 {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>

在这里插入图片描述

元素浮动的一些特点：

当一个元素脱离文档流后，它下边的元素会立即向上移动；
元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或者其他浮动元素；
如果浮动元素上面是一个没有浮动的块元素，则浮动元素不会超过块元素；
浮动元素不会超过它上边的兄弟元素，最多一边齐；
浮动的元素不会盖住文字，文字会自动环绕在元素周围，浮动原本的目的就是为了做文本环绕，不过现在拿来做页面布局用了。

元素脱离文档流之后的特点：

块元素脱离文档流之后，其高度和宽度默认都是由内容撑开；
内联元素脱离文档流之后，会变成块元素。

简单布局

下面，我们来实现一个简单布局的练习，整体框架如下：
在这里插入图片描述

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>简单布局</title>
		<style type="text/css">
			/*	清除浏览器默认样式 */
			* {
				padding: 0;
				margin: 0;
			}

			.head {
				background-color: #bfa;
				height: 80px;
				width: 1000px;
				margin: 10px auto 0px;
			}

			.content {
				background-color: orange;
				width: 1000px;
				height: 400px;
				margin: 10px auto;
			}

			.content1 {
				background-color: #c00;
				width: 190px;
				height: 95%;
				float: left;
				margin: 10px;
			}

			.content2 {
				background-color: #00c;
				width: 580px;
				height: 95%;
				float: left;
				margin: 10px 0;
			}

			.content3 {
				background-color: #c00;
				width: 190px;
				height: 95%;
				float: left;
				margin: 10px;
			}

			.tail {
				background-color: skyblue;
				width: 1000px;
				height: 80px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="head"></div>
		<div class="content">
			<div class="content1"></div>
			<div class="content2"></div>
			<div class="content3"></div>
		</div>
		<div class="tail"></div>
	</body>
</html>