浮动相关叙述

最新推荐文章于 2024-07-23 14:51:29 发布

Hatsune_1

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量95

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/Hatsune_1/article/details/127373134

版权

一、浮动简介

布局方式：文档流中元素默认的布局方式，margin，浮动，定位，弹性盒子，网格布局·····

浮动：设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点，

即块元素不会独占一行，行内元素也可以设置宽高等等

设置元素浮动：float

可选值：none 默认值

left 向左浮动

right 向右浮动

设置元素浮动后的特点

1、元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，

其下面的元素会立即跑上去

2、元素浮动之后，不会超过它前一个兄弟，最多一边齐

3、如果前一个兄弟没有浮动，下面浮动的元素，也不会跑到前面

4、设置元素浮动后，元素也是尽量的向左或者向右进行浮动

5、浮动元素不会超过其父元素的范围

总结

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列

通过浮动可以制作一些水平方向的布局

二、浮动特点

设置元素浮动第二类特点

特点1:

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，

所以我们可以通过浮动来设置文字环绕图片的效果

特点2：

块元素：

1:块元素不再独占页面的一行

2:块元素的宽高被内容撑开

行内元素：

1:浮动过后的行内元素,可以设置行高

总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内，行内块元素

三、简单的布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			header{
				width: 1000px;
				height: 100px;
				background-color: green;
				margin: 0 auto;
			}
			main{
				width: 1000px;
				height: 400px;
				background-color: orange;
				margin: 10px auto;
			}
			footer{
				width: 1000px;
				height: 100px;
				background-color: pink;
				margin: 0 auto;
			}
			.left{
				width: 240px;
				height: 400px;
				background-color: powderblue;
				float: left;
			}
			.center{
				width: 500px;
				height: 400px;
				background-color: rebeccapurple;
				float: left;
				margin: 0 10px;
			}
			.right{
				width: 240px;
				height: 400px;
				background-color: saddlebrown;
				float: left;
			}
		</style>

	</head>
	<body>
		<!-- 头部div -->
		<header></header>
		
		<!-- 主体内容div -->
		<main class="content">
			<!-- 左侧div -->
			<div class="left"></div>
			<!-- 中间div -->
			<div class="center"></div>
			<!-- 右侧div -->
			<div class="right"></div>	
		</main>
		
		<!-- 底部信息div -->
		<footer></footer>
		
	</body>
</html>

效果图：

Hatsune_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动相关叙述

1、元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，布局方式：文档流中元素默认的布局方式，margin，浮动，定位，弹性盒子，网格布局·····浮动：设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点，3、如果前一个兄弟没有浮动，下面浮动的元素，也不会跑到前面。总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内，行内块元素。4、设置元素浮动后，元素也是尽量的向左或者向右进行浮动。浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，设置元素浮动：float。
复制链接

扫一扫