CSS学习笔记8-浮动（float）

最新推荐文章于 2022-11-11 15:55:56 发布

糯米味儿的粽子

最新推荐文章于 2022-11-11 15:55:56 发布

阅读量268

点赞数

分类专栏： # CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/emmm520/article/details/119881415

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS学习笔记8——浮动

浮动

由于div、h1、h2、p等标签是块级标签，会独占一行，如果想让多个块级标签在一行显示，需要用到浮动标签。

浮动在css中用float来表示，常用值为left，right。

块级标签与行级标签演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块级标签</title>
	<style type="text/css">
		.c1{
			width: 100px;
			height: 50px;
			background: yellow;
		}
		.c2{
			width: 100px;
			height: 50px;
			background: green;
		}
	</style>
</head>
<body>
	<!-- 块级标签会独占一行 -->
	<div class="c1"></div>
	<div class="c2"></div>

	<h5>h标签是块级标签</h5>
	<h5>h标签是块级标签</h5>

	<p>p标签是块级标签</p>
	<p>p标签是块级标签</p>
	<!-- 行级标签不会独占一行 -->
	<a href="www.baidu.com">百度</a>
	<a href="www.sina.com.cn">新浪</a>
</body>
</html>

显示效果为：
在这里插入图片描述

浮动案例演示

将6个div按两行三列显示。

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style type="text/css">

		.b1{
			width: 200px;
			height: 200px;
			background: red;
			margin-right: 20px;
			margin-bottom: 20px;
			float: left;
		}

		.b2{
			width: 660px;
			height: 200px;
		}

	</style>
</head>
<body>
	<!-- 必须为盒子指定宽度才能居中 -->
	<center>
		<div class="b2">
			<div class="b1"></div>
			<div class="b1"></div>
			<div class="b1"></div>
		</div>

		<div class="b2">
			<div class="b1"></div>
			<div class="b1"></div>
			<div class="b1"></div>
		</div>
	</center>
	
</body>
</html>