万能float闭合

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

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

 

<style>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
</style>

 

这种方法所用代码很抽象但能工作,我也不打算深入理解WHY,所以努力找到了更好的方法了。原文在:http://annevankesteren.nl/2005/03/clearing-floats

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Clearing floats using ‘overflow’ - 003</title>
<style type="text/css">
 div#sidebar{
  float:left;
  width:20em
 }
 div#content{
  _height:1%;
  overflow:auto;
  background:lime
 }
</style>
<div id="content">
 <div id="sidebar">
  <dl>
   <dt>About FooML
   <dd>FooML is a markup language written in <abbr>XML</abbr>.
   <dt>FooML namespace
   <dd><code>http://example.org/2005/fooml</code>
   <dt>FooML <abbr>MIME</abbr> type
   <dd><code>application/x-fooml+xml</code>
  </dl>
 </div>
 <p>This outer <code>DIV</code> element, <code>div#content</code>, has a green background.
</div>

 

 
 
 

你可能感兴趣的:(float)