浮动

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

心奔

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

阅读量142

点赞数 1

分类专栏： CSS 文章标签： float 浮动

本文链接：https://blog.csdn.net/g960526/article/details/89468468

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

浮动

浮动是一个让元素拥有块级元素的特性但却可以在一排显示的属性,无论该元素是否是块级元素还是行内元素,与display:inline-block;的作用一致,但是也有很多的不同点

源代码如下:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<meta name="descrption" content="">
		<meta name="keywords" content="">
		<style type="text/css">
			*{margin:0px;padding:0px;}
			li{list-style:none;}

			/* 排列规则和宽高特性 */
			.box{
				width:500px;
				height:300px;
				border:1px solid red;
				margin:0 auto;
			}
			p{
				/* display:inline-block; */ /* 行块标签，一行显示 */
				/* float:left;  */ /* 左浮动 */
				width:100px;
				height:100px;
			}
			.item1{
				float:left;
				background-color:red;
			}
			.item2{
				float:left;
				background-color:green;
				/* height:120px; */
				height:90px;
			}
			.item3{
				background-color:pink;
				height:125px;
				float:left;
			}
			.item4{
				float:left;
				background-color:skyblue;
			}

			/* 层级特性 */
			.one{
				float:left;   /* 给one设置浮动 */
				width:100px;
				height:100px;
				background-color:rgba(255,0,0,0.5);
			}
			.two{
				/* float:left; */
				width:200px;
				height:200px;
				background-color:rgba(0,255,0,0.5);
			}
			.box2{
				width:200px;
				border:2px solid red;
			}

			/* 清除浮动 */
			.box3{
				
				width:500px;
				margin:30px auto;
				border:2px solid black;
				
			}
			.box3 p{
				float:left;
				width:100px;
				height:100px;
				margin:5px;
				border:1px solid red;
			}
			/* .box3 h4{
				clear:both;
			} */
			/* .box3::after{ 清除浮动的方法
				content:"";
				display:block;
				clear:both;
			} */
			.clearFix::after{   /*  最优的清除浮动的方法 */
						content:"";
						display:block;
						clear:both;
			}
		</style>

	</head>
	<body>
		<!--
			浮动： 注意:是给父级加clearFixed样式
				浮动是一个让元素拥有块级元素的特性但却可以在一排显示的属性，无论该元素是否是块级元素还是行内元素，与display:inline-block;的作用非常一致，但是也有很多不同点
			float:	
				left:左浮动 元素从左到右的排列
				right:右浮动 元素从右到左的排列
				none:默认值 无浮动（跟没写一样）

			浮动元素的特性：
				排列规则：
					1.浮动元素会在遇到父元素内容区（宽高）的边缘的时候停止
					2.遇到其他浮动元素的时候也会提停止
					3.当父元素的宽度不够的时候，该行放不下的元素会到第二行排列，同时遵循1 2的规则

				宽高特性：
					1.浮动元素没有设置宽高时，由内容撑开（和行块一样）,但是可以设置宽高
					2.不支持margin:auto;

				层级特性：浮动元素与非浮动元素的之间位置
					1.先是浮动元素后是非浮动元素：浮动元素会在非浮动元素的上方（看似重叠）
					2.先是非浮动元素后是浮动元素：依旧是两行，不会重叠（非浮动元素是块级标签，会独占一行）
					3.兄弟标签时,文字不会出现浮动元素的下方，而是和浮动元素并排显示{最开始浮动被设计出来的时候，是为了实现图片的四周环绕，所以浮动不会挡住兄弟级的文字}
	  !!!!!!!!!!	4.浮动元素无法撑起父级元素的高度  重点（行块元素可以撑起父级元素，因为浮动元素比其他元素高）


				清除浮动：
					为什么要清除浮动：
						是指为解决如父级高度塌陷不能占据当前位置等的一些问题，而不是说让浮动失效

					能够让浮动元素的父级自适应有高度的几种情况：
						1.父元素也同时浮动（问题：无法自适应居中）
						2.父元素定位（absolute 问题：无法自适应居中）
						3.父元素设置为display:inline-block;
						4.父元素 overflow:hidden;
					完美清除浮动的方法：
						clear:both  清除前面所有兄弟元素的浮动样式 
							1.给最后一个非浮动的兄弟元素添加（打辅助的） 
							2.必须是块级标签
					通常使用这种方式清除浮动：
						::afater{
							contrnt:""
							display:block;
							clear:both;
						}

					最终方案：在所要清除浮动的父元素上写上类名
					clrarFix::after{
						content:"";
						display:block;
						clear:both;
					}
				！！！！使用浮动，一定要清除浮动
				！！！！使用浮动，一定要清除浮动
				！！！！使用浮动，一定要清除浮动

		-->
		<div class="box">
			<p class="item1">1</p><!-- 排列规则：宽高特性： -->
			<p class="item2">2</p><!-- 排列规则：宽高特性： -->
			<p class="item3">3</p><!-- 排列规则：宽高特性： -->
			<p class="item4">4</p><!-- 排列规则：宽高特性： -->
		</div>
		<div class="box2">
			<p class="one">1</p> <!-- 层级特性 -->

			<!-- <p class="two">2今天好开心啊</p> -->
		</div>
		<br/><br/><br/><br/>

		<!-- 清除浮动 -->
		<div class="box3 clearFix">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<h4></h4>
		</div>
	</body>
</html>

效果图如下:
在这里插入图片描述
总结:每次使用浮动的时候,一定要记得清除浮动,要不然父级的元素无法由内容撑开,而且在使用浮动的时候一定要留意书写CSS时的规范,p h标签里面绝对不能嵌套块级标签.

心奔

关注

1
点赞
踩
1

收藏

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

浮动浮动是一个让元素拥有块级元素的特性但却可以在一排显示的属性,无论该元素是否是块级元素还是行内元素,与display:inline-block;的作用一致,但是也有很多的不同点源代码如下:<!doctype html><html> <head> <meta charset="utf-8"> <title>浮动</...
复制链接

扫一扫

专栏目录