CSS浮动的示例

最新推荐文章于 2024-03-16 20:07:31 发布

端脑

最新推荐文章于 2024-03-16 20:07:31 发布

阅读量457

点赞数

分类专栏：前端文章标签： CSS浮动的示例

本文链接：https://blog.csdn.net/qq_43776742/article/details/97923907

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

浮动最初的作用
浮动简易效果
浮动元素改变显示模式
固定宽度且居中布局

浮动最初的作用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   width: 500px;
	   	   height: 500px;
	   	   border: 1px solid #ccc;
	   	   margin: 0 auto;
	   }

	   img {
	   	   float: right; /*浮动最初 用文字环绕效果的*/
	   }
	</style>
</head>
<body>
	<div>
	1991年1月，发行专辑《一起走过的日子》，专辑同名主打歌获得十大劲歌金曲奖以及十大中文金曲奖[116-117] ；2月，发行粤语专辑《爱不完》[118]  ；该专辑发行首日录音带的销量达到16万张，而激光唱片的销量则有7.2万张[119] ；6月，发行国语专辑《我和我追逐的梦》；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[116] 。 1992年，在洛杉矶、旧金山等地举行美加巡回演唱会；9月，发行加入 刘德华 刘德华(3张) 华纳唱片公司以后的首张专辑《真我的风采》；该专辑发行后销量达到40万张[119] ；同年，在提前录制的央视春晚视频中，刘德华与毛阿敏合唱歌曲《心中常驻芳华》[120] 
    	<img src="images/img.jpg" height="220" width="171" alt="">；此外，他还发行了专辑《谢谢你的爱》，同名主打歌曲获得第十六届十大中文金曲奖[121] 。 1993年1月至2月，在香港红磡体育馆举行20场“真我的风采演唱会”；4月，推出加入飞碟唱片公司后的首张专辑《真情难收》，其中的主打歌曲《一辈子的错》由刘德华作词；11月，推出专辑粤语专辑《答案就是你》，专辑中的歌曲《永远寂寞》获得第16届十大中文金曲获奖[121] 。 1994年，发行国语专辑《忘情水》，同名主打歌获得第17届十大中文金曲奖最受欢迎国语歌曲金奖以及第1届华语榜中榜Channel [V]中文Top 20榜中榜歌曲奖[122-123] ；8月6日至25日，在香港红磡体育馆举行20场演唱会；11月25日，发行国语专辑《天意》；专辑中表达友情的主打歌曲《友谊历久一样浓》是刘德华个人填词的作品；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[11] 。
    	</div>
</body>
</html>

浮动简易效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  width: 200px;
	   	  height: 200px;
	   	  background-color: red;
	   	 /*  display: inline-block; *//* 转化为行内块 并排并且宽高有效 元素之间有间隙 不方便处理*/
	   	 float: right;
	   }
	</style>
</head>
<body>
	<div>111</div>
	<div>222</div>
	<div>333</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    div:first-child {
	    	width: 200px;
	    	height: 200px;
	    	background-color: red;
	    	float: left; /* 浮动的元素漂在标准流的上面 压住标准流*/
	    }

	    div:last-child {
	    	height: 320px;
	    	width: 140px;
	    	background-color: blue;
	    }
	</style>
</head>
<body>
	<div></div>
	<div></div>
</body>
</html>

浮动元素改变显示模式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   height: 200px;
	   	   width: 400px;
	   	   background-color: pink;
	   	   float: left; /* 块级元素设置浮动 具有行内块元素的特征*/
	   }

	   span {
	   	  height: 200px;
	   	  width: 100px;
	   	  float: left;
	   	  background-color: red;
	   }
	</style>
</head>
<body>
	<div>刘强东上头条</div>
	<span>抹茶妹妹</span>
</body>
</html>

固定宽度且居中布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   * {
	   	  padding: 0;
	   	  margin: 0;
	   }

	   .top,
	   .banner,
	   .main,
	   .footer {
	   	   width: 960px;
	   	   text-align: center;
	   	   margin: 0 auto;
	   	   border: 1px solid #ccc;
	   	   margin-bottom: 10px;
	   }

	   .top {
	   	   height: 80px;
	   	   background-color: pink;
	   }

	   .banner {
	   	    height: 120px;
	   	    background-color: blue;
	   }

	   .main {
	   	   height: 500px;
	   	   background-color: skyblue;
	   }

	   .left {
	   	  width: 300px;
	   	  height: 500px;
	   	  background-color: purple; 
	   	  float: left;
	   }

	   .right {
	   	   width: 600px;
	   	   height: 500px;
	   	   background-color: gray;
	   	   float: right;
	   }

	   .footer {
	   	    height: 140px;
	   	    background-color: #000;
	   }


	</style>
</head>
<body>
	<div class="top"></div>
	<div class="banner"></div>
	<div class="main">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="footer"></div>
</body>
</html>