HTML学习之路-09浮动布局

『Knight』

已于 2022-10-28 21:25:42 修改

阅读量3.5k

点赞数 3

分类专栏： HTML学习文章标签：学习 css css3

于 2022-08-22 23:23:39 首次发布

本文链接：https://blog.csdn.net/weixin_63204687/article/details/126469711

版权

HTML学习专栏收录该内容

19 篇文章 3 订阅

订阅专栏

一、浮动布局

a.浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来

3、相邻浮动的块元素可以并在一行，超出其父级宽度就换行

4、浮动让内联元素或块元素自动转化为内联块元素(此时不会有行内联块元素间隙问题)

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果。

6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动

7、浮动元素之间没有垂直margin的合并

b.设置左浮动右浮动案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 400px;
				height: 80px;
				border: 1px gold solid;
				margin: 50px auto 0px;
			}
			.con div{
				width: 60px;
				height: 60px;
				margin: 10px;/* 使用margin使其垂直方向居中 */
			}
			.con .box1{
				float: left;
				background-color: #90ee90;
			}
			.con .box2{
				float: right;
				background-color: pink;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="con">
			<div class="box1"></div>
			<div class="box2"></div>
		</div> 
	</body>
</html>

本案列只是简单使用了foalt:left; foalt:right;其中要注意的一点是对于垂直方向的居中本次是使用margin的方法来处理。也可以通过text-line=height来设置。

c.案例升级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 210px;
				border: 1px black solid;
				margin: 50px auto 0px;
			}
			.con div{
				width: 50px;
				height: 50px;
				margin: 10px;/* 使用margin使其垂直方向居中 */
				background-color: gold;
				float: left;
			}
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="con">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div> 
	</body>
</html>

证明了margin不会合并但是因为没有清除浮动导致错误。

d.清除浮动方法a

父级上增加属性overflow：hidden

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 210px;
				border: 1px black solid;
				margin: 50px auto 0px;
				overflow: hidden;
			}
			.con div{
				width: 50px;
				height: 50px;
				margin: 10px;/* 使用margin使其垂直方向居中 */
				background-color: gold;
				float: left;
			}
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="con">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div> 
	</body>
</html>

e.清除浮动方法b

在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 210px;
				border: 1px black solid;
				margin: 50px auto 0px;
				list-style: none;/* 清除小圆点 */
				padding: 0px;/* ul默认设置padding和margin */
			}
			.con li{
				width: 50px;
				height: 50px;
				margin: 10px;/* 使用margin使其垂直方向居中 */
				background-color: gold;
				float: left;
				text-align: center;/* 文字水平居中 */
				line-height: 50px;/*文字垂直居中 */
			}
			}
		</style>
		<title></title>
	</head>
	<body>
		<ul class="con">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<div style="clear: both;"></div>
		</ul>
	</body>
</html>

注意ul也本身具有margin和padding，

设置文字垂直水平居中： text-align: center;/* 文字水平居中 */
line-height: 50px;/*文字垂直居中 */

清除li的自带小圆点：list-style: none;/* 清除小圆点 */

f.清除浮动的方法c

使用成熟的清浮动样式类，clearfix

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				width: 210px;
				border: 1px black solid;
				margin: 50px auto 0px;
				list-style: none;/* 清除小圆点 */
				padding: 0px;/* ul默认设置padding和margin */
			}
			.con li{
				width: 50px;
				height: 50px;
				margin: 10px;/* 使用margin使其垂直方向居中 */
				background-color: gold;
				float: left;
				text-align: center;/* 文字水平居中 */
				line-height: 50px;/*文字垂直居中 */
			}
			.clearfix:before{
				/* 解决塌陷 */
				content: "";
				display: table;
			}
			.clearfix:after{
				/* 自己定义一类通过伪元素来塞对象解决浮动 */
				content: "";
				display: table;
				clear: both;
			}
		</style>
		<title></title>
	</head>
	<body>
		<ul class="con clearfix">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</body>
</html>

这个方法推荐使用，总结起来无论是使用伪元素来解决塌陷还是使用伪元素清除浮动都是通过在前面后后面塞一个对象来实现，只不过这个对象是一个空对象罢了。

g.文字绕图

素材：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				height: 210px;
				width: 450px;
				border: 1px black solid;
				margin: 50px auto 0px;
			}
			.con .pic{
				float: left;
				margin: 10px;
			}
			.con .text{
				margin: 10px;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="con">
			<div class="pic"><img src="../../../images/bg.jpg" alt="图片"></div>
			<div class="text">HTML5是对HTML标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5的语法是向后兼容的。HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。
</div>
		</div>
	</body>
</html>

h.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.con{
				/* 边框由li来设置 */
				height: 50px;
				width: 694px;
				list-style: none;
				margin: 50px auto 0;
				padding: 0px;
			}
			.con li{
				float: left;
				height: 48px;
				width: 98px;
				margin-left: -1px;
				text-align: center;/* 水平对齐要找父级 */
				border: 1px solid gold;	
			}
			.con li a{
				font-family: "微软雅黑";
				color: pink;
				font-size: 16px;
				display: inline-block;/* 使其设置宽高有效 */
				height: 48px;
				width: 98px;
				text-decoration: none;/* 去除下划线 */
				line-height: 48px;/* 垂直对齐找本身设置 */
			}
			.con li a:hover{
				background-color: gold;
				color: white;
			}
		</style>
		<title></title>
	</head>
	<body>
		<ul class="con">
			<li><a href="#">首页</a></li>
			<li><a href="#">公司简介</a></li>
			<li><a href="#">解决方案</a></li>
			<li><a href="#">公司新闻</a></li>
			<li><a href="#">行业动态</a></li>
			<li><a href="#">招贤纳才</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</body>
</html>