浮动

最新推荐文章于 2023-03-25 16:12:57 发布

NSSWTT

最新推荐文章于 2023-03-25 16:12:57 发布

阅读量181

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/NSSWTT/article/details/104385118

版权

HTML 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

一. 浮动
1.作用
用来实现网页中水平布局的结构（让块元素可以放置在同一行）。
2.实现方式
给想要放置在同一行的元素添加float属性即可。
注意：给元素添加上float属性之后，该元素会提升层级，脱离文档流。会影响到之前在同一个层级上的元素，当前float的元素层级提升，之前的层级位置空出，后面的元素自动占据之前的位置，所以就看到覆盖的效果。
3.浮动原理
a.当给一个元素添加了float属性，该属性会给元素实现两个功能（1.可以提升层级 2.可以允许当前元素的这一行能够放置其他浮动元素了）。
b.Float的值left和right，决定的当前浮动元素放置在这一行时，放到什么位置，left最左边，right最右边。
c.当一个元素浮动时，会先去查找前面有没有同级别的浮动元素，如果有，就往后放，如果放的时候，没有空间了，则被挤到下一行。当被挤到下一行时，当前元素的上边界会根据当前元素的浮动方向（left，right），保持和上一个浮动方向相同的元素的下边界重合。
当前元素是左浮动元素left，则会和上一个左浮动元素下边界重合。
当前元素是右浮动元素right，则会和上一个右浮动元素下边界重合。
注意：如果一个元素既可以使用左浮动，又可以使用右浮动时，一定要注意，使用哪个浮动方向不会影响自己，是影响的下一个浮动元素。
二. 浮动产生的问题以及解决办法
1.影响兄弟元素布局
2.父元素高度塌陷
原因：当子元素添加float属性之后，元素浮动了，则会影响父元素动态识别子元素的高度，浮动元素的高度父元素无法识别。
解决方案1：给父元素指定一个高度即可。但是这种方式不通用。
解决方案2：给父元素添加overflow:hidden;属性即可。
三.浮动练习1-左右布局
效果图：

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左右布局</title>
		<style type="text/css">
			.left{
				width: 200px;
				height: 800px;
				background-color: yellow;
				/*字体*/
				font-size: 50px;
				/*水平居中*/
				text-align: center;
				/*垂直居中*/
				line-height: 800px;	
				/*浮动*/
				float: left;
			}
			.right{
				width: 800px;
				height: 800px ;
				background-color: red;
				/*字体*/
				font-size: 50px;
				/*水平居中*/
				text-align: center;
				/*垂直居中*/
				line-height: 800px;
				/*浮动*/
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="left">
			左
		</div>
		<div class="right">
			右
		</div>
	</body>
</html>

四.浮动练习2-左中右布局
效果图（注意这里的文字是居中的）：

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左中右布局</title>
		<style type="text/css">
			.wrap{
				/*让元素水平居中*/
				margin: 0 auto;
				width: 1000px;
				border: 5px solid red;
				/*方法一*/
				/*height: 800px;*/
				/*方法二*/
				overflow: hidden;
			}
			.left{
				width: 100px;
				height: 800px;
				background-color: yellow;
				/*文字*/
				font-size:50px;		
				color:white;
				text-align: center;
				/*垂直居中*/
				line-height:800px;
				float: left;
			}
			.middle{
				width: 800px;
				height: 800px;
				background-color:red;
				/*文字*/
				font-size:50px;		
				color:white;
				text-align: center;
				/*垂直居中*/
				line-height:800px;
				float: left;
			}
			.right{
				width: 100px;
				height: 800px;
				background-color: blue;
				/*文字*/
				font-size:50px;		
				color:white;
				text-align: center;
				/*垂直居中*/
				line-height:800px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left">
			左
		    </div>
		    <div class="middle">
			中
		    </div>
		    <div class="right">
			右
		    </div>
		</div>
	</body>
</html>

五.浮动练习3-12宫格布局
效果图：

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>12宫格-浮动</title>
		<style type="text/css">
			.wrap{
				/*水平居中*/
				margin: 0 auto;
				width: 500px;
				text-align: center;
				border: 1px solid black;
				/*处理因子元素浮动导致父元素塌陷问题*/
				overflow: hidden;
			}
			.wrap>div{
				font-size:50px;
				color:white;
				text-align: center;
			}
			.green{
				width: 100px;
				height: 100px;
				background-color: green;
				/*一行文字垂直居中*/
				line-height:100px;
				/*浮动*/
				float: left;
			}
			.f6{
			    width: 300px;
			    height: 100px;
			    background-color: yellow;	
			    /*一行文字垂直居中*/
				line-height:100px;
				/*浮动*/
				float: left;
			}
			.f7{
				width: 200px;
				height: 200px;
				background-color: lightblue;
				/*一行文字垂直居中*/
				line-height:200px;
				/*浮动*/
				float: right;
			}
			.f8{
				width: 150px;
				height: 150px;		
				background-color: gray;
				/*一行文字垂直居中*/
				line-height:150px;
				/*浮动*/
				float: left;
			}
			.f9{
				width: 150px;
				height: 150px;
				background-color: black;
				/*一行文字垂直居中*/
				line-height:150px;
				/*浮动*/
				float: left;
			}
			.f10{
				width: 200px;
				height: 150px;
				background-color: aqua;
				/*一行文字垂直居中*/
				line-height:150px;
				/*浮动*/
				float: right;
			}
			.f11{
				width: 300px;
				height: 100px;
				background-color: red;
				/*一行文字垂直居中*/
				line-height:100px;
				/*浮动*/
				float: left;
			}
			.f12{
				width: 500px;
				height: 100px;
				background-color: blue;
				/*一行文字垂直居中*/
				line-height:100px;
				/*浮动*/
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<!--.f${$}*12-->
			<div class="f1 green">1</div>
			<div class="f2 green">2</div>
			<div class="f3 green">3</div>
			<div class="f4 green">4</div>
			<div class="f5 green">5</div>
			<div class="f6">6</div>
			<div class="f7">7</div>
			<div class="f8">8</div>
			<div class="f9">9</div>
			<div class="f10">10</div>
			<div class="f11">11</div>
			<div class="f12">12</div>
		</div>
	</body>
</html>

NSSWTT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动

一. 浮动1.作用用来实现网页中水平布局的结构（让块元素可以放置在同一行）。2.实现方式给想要放置在同一行的元素添加float属性即可。注意：给元素添加上float属性之后，该元素会提升层级，脱离文档流。会影响到之前在同一个层级上的元素，当前float的元素层级提升，之前的层级位置空出，后面的元素自动占据之前的位置，所以就看到覆盖的效果。3.浮动原理 a.当...
复制链接

扫一扫

专栏目录