欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css浮动与清除浮动

程序员文章站 2022-03-29 20:41:01
...

浮动可以解决的问题：

  1. 可以解决文字包围图片的问题
  2. 可以解决莫名其妙的间隔问题
  3. 可以向左向右排版对齐

问题一描述：

<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.content{
				width: 800px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img src="img/hejiong.jpg" >
			何炅，1974年4月28日出生于湖南省长沙市雨花区，中国内地男主持人、演员、歌手、导演、作家。 [1] 
			1995年，主持央视节目《大风车》。1998年起，主持湖南卫视访谈类综艺节目《快乐大本营》 [2]  。2004年7月，推出个人首支单曲《栀子花开》，9月，获得第二十二届中国电视金鹰奖优秀主持人奖 [3]  。2005年，担任《超级女声》主持人 [4]  。2007年，主持湖南卫视第一届《快乐男声》；8月，主持舞蹈节目《舞动奇迹》 [5]  。2010年，获得第二十五届中国电视金鹰奖优秀主持人奖。2012年，担任晚间综艺节目《百变大咖秀》的主持 [6]  。2014年起，连续三年主持央视公益节目《开学第一课》。2015年7月，被聘任为中国电视艺术家协会主持人专业委员会副主任；同月，执导的电影处女作《栀子花开》上映 [7]  ；12月29日，加盟阿里音乐任CCO。2016年3月，与赖声川再度合作打造话剧《水中之书》 [8]  。
			2020年8月27日，何炅名列《2020福布斯中国名人榜》第53位 [9-10]  。10月14日，湖南卫视官宣，将搭档刘涛主持第13届金鹰节颁奖晚会 [11]  。
		</div>
	</body>

css浮动与清除浮动

解决：

img{
				float: left;
			}

问题二描述：

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width:600px;
				height:600px;
				margin: 0 auto;
				background: lightcyan;
			}
			.child{
				display: inline-block;
				width:200px;
				height:200px;
				margin: 0 auto;
				background: saddlebrown;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
		</div>
	</body>

css浮动与清除浮动

出现了空格，因为代码中一个换行就是一个空格，如果三个child不换行，就不会出现此问题，但是采用浮动解决此问题

解决：加入浮 float: left;

 

浮动：可以设置元素，脱离正常的文件流，向左或向右，靠近父元素的边缘或者设置了浮动的其他元素的边缘靠拢

浮动的高度塌陷问题！

例如：取消设定父元素的高度

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width:600px;
				/* height:600px; */
				margin: 0 auto;
				background: lightcyan;
			}
			.child{
				display: inline-block;
				width:200px;
				height:200px;
				margin: 0 auto;
				background: saddlebrown;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
		</div>
		<h1>helloworld</h1>
	</body>

css浮动与清除浮动

helloworld本来应该在下面

解决方案：

1.设定父元素高度

2.最佳解决方案，伪元素清除浮动 （设定一个clear类，只要用了浮动就调用）

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width:600px;
				/* 解决方案1，设定高度 */
				/* height:600px; */
				margin: 0 auto;
				background: lightcyan;
			}
			.child{
				display: inline-block;
				width:200px;
				height:200px;
				margin: 0 auto;
				background: saddlebrown;
				float: left;
			}
			/* 解决方案2，设定为元素，清除浮动 */
			
			/* .parent:after{
				content: "";
				display: block;
				clear:both;
			} */
			/* 设定一个类 */
			.clear:after{
				content:"";
				/* div是快元素，设定为block */
				display: block;
				clear:both;
			}
			/* clear{
				clear: both;
			} */
		</style>
	</head>
	<body>
		<div class="parent clear">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<<!-- div class="c -->lear"></div>
		</div>
		<h1>helloworld</h1>
	</body>

 

相关标签： 前端css css 前端

上一篇： 前世看今生，从JavaEE到微服务

下一篇： 点子和执行力

推荐阅读