清浮动方法 

<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>

　　待补充。。。

posted on 2017-12-30 08:29  水墨江山画  阅读(133)  评论(0)  编辑  收藏  举报

导航