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

清浮动方法

程序员文章站 2022-03-29 17:08:52
...
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			.div2{height: 50px;width: 50px;background-color: #000000;float: left;
			     /* display: inline-block;*/}
			/*清浮动方法3 :用inline-block代替浮动,但会引起换行解析为空格的问题以及无法设置margin auto*/
			.outside{width: 500px;/*height: 500px;*/
			/*清浮动方法1 :给父级元素设置高度*/
			        /*float: left;*/
			/*清浮动方法2: 给父级元素设置浮动,使之与子元素在同一层*/
				    background-color:blueviolet ;
				    border: 5px solid red;}	
		   
			.div1{height: 300px;width: 300px;background-color:gold;float: left;}
		   
		  
		   
		   
		            /*.clearfix{clear: left;}*/
		    /*清浮动方法 : 给父级元素添加一个DIV空标签,清除一侧浮动*/
		</style>
	</head>
	<body>
		<div class="outside">
			<div class="div1">123</div>
			<div class="div2">456</div>
			<div class="clearfix"></div>
			<!--<br clear="left" />-->
			<!--清浮动方法4: 使用空格标签设置清除浮动-->
		</div>
	</body>
</html>

  待补充。。。


更多专业前端知识,请上【猿2048】www.mk2048.com
相关标签: js css 清浮动