js--浮动

最新推荐文章于 2023-02-01 15:58:34 发布

weixin_33888907

最新推荐文章于 2023-02-01 15:58:34 发布

阅读量246

点赞数

文章标签： xhtml python

原文链接：https://my.oschina.net/lgmcolin/blog/119262

版权

2019独角兽企业重金招聘Python工程师标准>>>

.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;  
    content:"";
    clear:both;
    height:0;
}
        
.clearfix{  
    display:inline-table;
}/* Hides from IE-mac */
        
* html .clearfix{
    height:1%;  
}
       
.clearfix{  
    display:block; 
}/* End hide from IE-mac */

说明：

*对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的
内容为空的块来为目标元素清除浮动。
*第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。
*利用 * / 对 IE/Mac 隐藏一些规则：
* height:1% 用来触发 IE6 下的haslayout。
*重新对 IE/Mac 外的IE应用 block 显示属性。
*最后一行用于结束针对 IE/Mac 的hack。

由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近
标准的路上，这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后，新的清除浮动方法：

/* new clearfix */.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}* html .clearfix { zoom:1;}/* IE6 */*:first-child+html .clearfix{ zoom:1;}/* IE7 */

说明：

IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

糖伴西红柿说：
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成：

.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}.clearfix{*zoom:1;}

以我目前的浅薄认知来讲，以上写法应该也可以直接达到同样效果。关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。

我平时都是用 overflow:hidden 来清除浮动的，因为够简单粗暴。但是 overflow 有时候也不太适用：

父级元素使用 overflow:hidden 时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。

对 css3 来说，也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时，box-shadow 会被裁剪。

完整测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>float clearing methods &amp; CSS3 box-shadow and transforms</title>

	<link rel="icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	
	<style type="text/css">
		body{ text-align: center;}
		h2{
			clear: both;
			margin:10px 0;		
		}
		.stage{
			width: 220px;
			margin:0 auto 20px;
			padding:0 0 10px;
			background-color: yellow;
		}
		.col{
			float: left;
			width: 100px;
			height: 100px;
			background-color: red;
			border:1px solid #000;
			-webkit-box-shadow:0 0 8px #00f;
			-moz-box-shadow:0 0 8px #00f;
			box-shadow:0 0 8px #00f;
		}		
		.col:hover{
			-webkit-transform:rotate(45deg);
			-moz-transform:rotate(45deg);		
		}
		.stage-right{
			float: right;		
		}
		.group:after{
			visibility:hidden;
			display: block;
			content: '';
			font-size: 0;
			height: 0;
			clear: both;
			zoom: 1;
		}
		/* 或者使用 .clearfix 来清除浮动*/
		.clearfix:after{
			visibility: hidden;
			display:block;
			content:"";
			height:0;
			clear: both;
			font-size:0;
		}
		.clearfix{
			display:inline-table;
		}
		* html .clearfix{
			height:1%;		
		}
		.clearfix{
			display: block;		
		}

		hr{
			clear: both;
			margin:2em 0;		
		}
	</style>
<body>
	<h1>Impact of float clearing methods on CSS3 box-shadow and transforms</h1>
	<a href="http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/">read the blog post</a>
	<h2>No Float Clearing Applied</h2>
	<div class="stage">
		<div class="stage-left col">
			
		</div>
		<div class="stage-right col">
			
		</div>
	</div>
	
	<hr />
	
	<h2>Clearfix Applied</h2>
	<div class="stage group">
		<div class="stage-left col">
			
		</div>
		<div class="stage-right col">
			
		</div>
	</div>
	
	<hr />
	
	<h2>Overflow: hidden; Applied</h2>
	<div class="stage" style="overflow: hidden;">
		<div class="stage-left col">
			
		</div>
		<div class="stage-right col">
			
		</div>
	</div>

	<hr />

	<h2>Overflow: auto; Applied</h2>
	<div class="stage" style="overflow: auto;">
		<div class="stage-left col">
			
		</div>
		<div class="stage-right col">
			
		</div>
	</div>

</body>

转载于:https://my.oschina.net/lgmcolin/blog/119262