不增加额外元素实现清除浮动( 闭合浮动元素 Clear Floats )

浮动(Float)是页面布局中经常用到的技巧,但是,同时也出现了很多由于浮动引发的问题;父元素不能闭合具有浮动属性的子元素,是这些问题中最常见且最让新手头痛的一个。

清除浮动常见的做法是加一个额外的标签,然后给这个标签加上 clear:both 的设置,追求完美的人当然不乐意这种方式,于是,便有了本文将要介绍的:不增加额外元素实现清除浮动的方法。

 
<style type="text/css">
 
/*
说明:不增加额外元素实现清除浮动( 闭合浮动元素 Clear Floats )
整理: CodeBit.cn ( http://www.CodeBit.cn )
*/
 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 
</style>

使用时,给需要清除浮动的元素增加一个 clearfix 的 class 即可。

如何在图片浮动时不让文字内容环绕到图片下方

如何在图片浮动时不让文字内容环绕到图片下方

类似左侧图片右侧文字的排版方式我们经常能够见到,但是,有许多网友都遇到过一个问题:在图片浮动到一侧时,超出图片高度的文字往往会环绕到图片的下方。

ghettocooler.net 的解决方案:

如何在图片浮动时不让文字内容环绕到图片下方 – 示例1

 
<style type="text/css">
 
.callout {
	border:1px solid #000;
	float:left;
	width:275px;
}
 
.callout h3 {
	width:115px;
	height:65px;
	float:left;
	text-indent:-8008px;
	background:transparent url(team-report.gif) no-repeat 0 0;
}
 
.callout * {
	width:160px;
	float:right;
}
 
.callout * * {
	width:auto;
	float:none;
}
 
</style>
 
<div class="callout">
	<h3>team report graphic, replaced image</h3>
	<h2>Team Report 10-06-05</h2>
 
	<ul>
		<li>An <a href="#">anchor tag</a> perhaps?</li>
		<li>Or a <strong>strong tag</strong> perhaps?</li>
	</ul>
 
	<p>Here's a paragraph too!</p>
</div>

原文请浏览:
http://www.ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/

用背景图的方式实现在图片浮动时不让文字内容环绕到图片下方

这个方法的好处是代码简单,使用方便,当然,前提是你不需要在图片上加链接。

如何在图片浮动时不让文字内容环绕到图片下方 – 示例2

 
<style type="text/css">
.callout {
	background:url('logo.gif') no-repeat 5px 5px;
	padding:5px 5px 5px 230px;
	border:1px solid #999;
	width:60%;
	margin:0 auto;
}
.callout h2 {
	margin:0;
	padding:0;
}
</style>
 
<div class="callout">
	<h2>CodeBit.cn - 聚合小段精华代码</h2>
	<p>在编程的过程中,我们通常都会积累很多简单、有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。</p>
</div>