<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>焦秋野 &#124; 关注网站设计,前端资讯,用户体验,SEO,网站设计 &#187; div</title>
	<atom:link href="http://www.imjqy.com/tag/div/feed" rel="self" type="application/rss+xml" />
	<link>http://www.imjqy.com</link>
	<description></description>
	<lastBuildDate>Wed, 01 Feb 2012 00:17:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>div设置float后,高度问题</title>
		<link>http://www.imjqy.com/javascript/div_float_hight</link>
		<comments>http://www.imjqy.com/javascript/div_float_hight#comments</comments>
		<pubDate>Sat, 13 Feb 2010 02:17:03 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[float]]></category>
		<category><![CDATA[兼容]]></category>
		<category><![CDATA[浮动]]></category>

		<guid isPermaLink="false">http://www.imjqy.com/?p=103</guid>
		<description><![CDATA[如果一个div没有闭合(清除)浮动元素，它将造成的后果是&#8212;&#8211;div的高度不能自动增加。 目前用来清除“闭合(清除)浮动”的方法，主要是一下四种： 1. 额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。 我个人不喜欢这种方法，但是它确实是W3C推荐的方法 程序代码 &#60;div style=”clear:both;”&#62;&#60;/div&#62; 或者使用 程序代码 &#60;br style=”clear:both;” /&#62; 2. 使用after伪类 这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。 这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。 程序代码 #outer:after{ content:”.”; height:0; visibility:hidden; display:block; clear:both; } 3. 设置overflow为hidden或者auto 这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素. 不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面 4. 浮动外部元素，float-in-float 这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。 个人不是很赞成这种做法，但是从dudo最后的总结总可以看出，他好像很赞成这种做法]]></description>
			<content:encoded><![CDATA[<p>如果一个div没有闭合(清除)浮动元素，它将造成的后果是&#8212;&#8211;div的高度不能自动增加。</p>
<p>目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：</p>
<p><strong>1. 额外标签法<br />
</strong><br />
这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。<br />
我个人不喜欢这种方法，但是它确实是W3C推荐的方法</p>
<p>程序代码<br />
&lt;div style=”clear:both;”&gt;&lt;/div&gt;<br />
或者使用<br />
程序代码<br />
&lt;br style=”clear:both;” /&gt;</p>
<p><strong>2. 使用after伪类</strong></p>
<p>这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。<br />
这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。</p>
<p><span id="more-103"></span></p>
<p>程序代码</p>
<p>#outer:after{<br />
content:”.”;<br />
height:0;<br />
visibility:hidden;<br />
display:block;<br />
clear:both;<br />
}</p>
<p><strong>3. 设置overflow为hidden或者auto</strong></p>
<p>这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.<br />
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面</p>
<p><strong>4. 浮动外部元素，float-in-float</strong></p>
<p>这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。<br />
个人不是很赞成这种做法，但是从dudo最后的总结总可以看出，他好像很赞成这种做法</p>
]]></content:encoded>
			<wfw:commentRss>http://www.imjqy.com/javascript/div_float_hight/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

