CSS-浮动

最新推荐文章于 2022-11-28 21:08:42 发布

玳宸

最新推荐文章于 2022-11-28 21:08:42 发布

阅读量177

点赞数 1

分类专栏： # HTML5 & CSS3

本文链接：https://blog.csdn.net/zeroheitao/article/details/108673752

版权

HTML5 & CSS3 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、属性值

二、浮动口诀

三、浮动应用案例

四、浮动的扩展

五、清除浮动

一、属性值

float:none
float:left
float:right

二、浮动口诀

浮——脱离标准流，漂浮在普通标准流上方

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.one{
			width: 200px;
			height: 200px;
			background-color: pink;
			float:left;
		}
		.two{
			width: 300px;
			height: 300px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

红色为标准流，

漏——浮动的盒子，把自己原来的位置漏给下面的标准流盒子，就是不占有原来位置，脱离标准流，俗称“脱标”。
特——float属性会改变元素display属性。
任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和行内块相似。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.one{
			width: 200px;
			height: 200px;
			background-color: pink;
			float: left;
		}
		.two{
			width: 200px;
			height: 200px;
			background-color: purple;
			float: left;
		}
		.three{
			width: 300px;
			height: 300px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>
</html>

在这里插入图片描述
注意：

浮动的元素互相贴靠在一起。
如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐。

三、浮动应用案例
浮动的元素都有一个标准流的“父亲”。
完整的网页=标准流+浮动+定位

小米

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*清除元素默认内外边距样式*/
		*{
			margin: 0;
			padding: 0;
		}
		/*清除列表样式*/
		li{
			list-style: none;
		}
		.box{
			width: 1226px;
			height: 615px;
			background-color: pink;
			margin: auto;
		}
		.left{
			width: 234px;
			height: 615px;
			background-color: purple;
			float: left;
		}
		.left img{
			width: 234px;
			height: 615px;
		}
		.right{
			width: 992px;
			height: 615px;
			background-color: skyblue;
			float:right;
		}
		.right li{
			float: left;
			width: 234px;
			height: 300px;
			background-color: pink;
			margin-left: 14px;
			margin-bottom: 14px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">
			<img src="jackson.jpg" alt="">
		</div>
		<ul class="right">
			<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>
	</div>
</body>
</html>

在这里插入图片描述

导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.banner{
			width: 760px;
			height: 150px;
			background-color: pink;
			margin: auto;

		}
		img{
			width: 760px;
			height: 150px;
		}
		.nav{
			width: 760px;
			height: 32px;
			margin: auto;
			background-color: #9F8E7A;
		}
		.nav ul li{
			float: left;
		}
		.nav ul li a{
			/*a是行内元素需要转换成块元素*/
			display: block;
			width: 80px;
			height: 32px;
			background-color: #928370;
			font-size: 12px;
			text-decoration: none;
			color: #40510a;
			text-align: center;
			line-height: 32px;
		}
		.nav ul li a:hover{
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div class="banner">
		<img src="xy.jpg" alt="">
	</div>
	<div class="nav">
		<!-- 重要导航栏都用li包含a -->
		<ul>
			<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>
	</div>
</body>
</html>

在这里插入图片描述

四、浮动的扩展

子盒子不会与父盒子的边框重叠，也不会超过父盒子的内边距。
浮动只会影响当前或者后面的标准流盒子，不会影响前面的标准流。

五、清除浮动
清除浮动的原因：父级盒子不方便给高度，但是子盒子就不占有位置，最后父级盒子高度为0。影响了下面的标准流盒子。
清除浮动的方法
clear:left / right / both;
1、额外标签法：在最后一个浮动后面添加一个空标签,例如

，或者其他标签亦可。
2、在父级添加overflow属性：overflow : hidden |auto |scroll 都可以。
缺点：内容多时容易导致内容被隐藏，生成滚动条。
3、使用after伪元素：在上面申明，下面调用。用CSS写的，相当于额外标签法。
.clearfix:after{ content : “”; display : block; height : 0; clear : both; visibility : hidden; }
.clearfix{*zoom: 1;} /IE6、7专有/
4、使用双伪元素：在上面申明，下面调用。
.clearfix:before,.clearfix:after{content : “”; display : table;}
.clearfix:after{clear: both;}
.clearfix{*zoom: 1;}

玳宸

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-浮动

一、属性值二、浮动口诀三、浮动应用案例四、浮动的扩展五、清除浮动一、属性值float:nonefloat:leftfloat:right二、浮动口诀浮——脱离标准流，漂浮在普通标准流上方<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .one{
复制链接

扫一扫