css效果 float属性

ap0406708

浏览: 278812 次
性别:
来自: 深圳

最近访客更多访客>>

yuanyu113

姜子鸭

sxzheng96

helloworld_i_android

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS学习

CSS XHTML IE HTML Firefox

html代码:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2 Column Liquid CSS Layout - from the "Stylin' with CSS" Stylib library</title>
<!--the layout and text stylesheets-->
<script type="text/javascript" src="../../lib/js_tools/minmax.js"></script>
<link href="2_col_liquid.css" media="all" rel="stylesheet" />
<link href="../../lib/css_styles/text/text_n_colors.css" media="all" rel="stylesheet" />
</head>

<body class="olive">
<div id="main_wrapper">

<div id="header">
	<div id="header_inner">
		<h1>A Two-Column Liquid Layout</h1>
 	</div><!-- end header_inner -->
</div><!-- end header -->

<div id="nav">
	<div id="nav_inner">
		<ul>
			<li><a href="#">Nav item 1</a></li>
			<li><a href="#">Nav item 2</a></li>
	  </ul>
	</div><!-- end nav_inner -->
</div><!-- end nav -->

<div id="content">

	<div id="content_inner">
	
	<h2>About This Layout</h2>

    <h3>The Concept</h3>
    <p>The four structural divs&mdash;header, nav,
      content and footer&mdash;nest inside a fixed
      width containing div. The nav column is fixed width and floated, and the content column is auto width, unfloated. The footer is cleared
      so it sits beneath whichever of the 
      columns is longest.</p>
	  <p>Auto left and right margin settings are applied
	    to the fixed-width containing div, which makes
	    the layout center in a wide browser window.</p>
    <h3>The <em>Stylib</em> Files</h3>
<p>This example uses two CSS files from the <em>Stylib</em> CSS library</p>
		<ol>
			<li><a href="#">2_col_liquid.css</a></li>
			<li><a href="#">text_n_colors.css</a></li>
		</ol>
		<p>The XHTML markup file is called</p>
		<ul>
			<li><a href="#">2_col_liquid.html</a></li>
		</ul>
        <p>Note: Inner divs inside each of the four main
          divs allow padding and borders to
          be applied without affecting the width of
          the main structural divs.</p>

	</div>
	<!-- end content_inner -->
</div>
<!-- end content -->

<div id="footer">
	<div id="footer_inner">
		<p>&copy; 2007 - a CSS template from <a href="http://www.stylinwithcss.com"><em>Stylin'
            with CSS, Second Edition</em></a> by Charles Wyke-Smith</p>
	</div><!-- end footer_inner -->
</div><!-- end footer -->

</div><!--end main wrapper-->

</body>
</html>

css代码

/* TWO COLUMN LAYOUT */

body {
	text-align:center; /* IE6 needs this to center the layout in the browser window */
	}
#main_wrapper {
	max-width:960px; /* sets max layout width */
	min-width:720px; /* sets min layout width */
	margin-left:auto;  /* centers layout in browser */
	margin-right:auto; /* centers layout in browser */
	text-align:left; /* resets the centering hack for IE6 on the body tag */
	}
#header {
	 
	}
#nav {
	width:140px; /* this width + content width must total 100% */
	float:left; /* floats on nav and content divs make them sit side by side */	
	}
#content {
	/* float:left; */
	/* margin-left:140px; */
	/* default auto width */
	}
/* here comes a hack for IE6 */
/* floating this element gets rid of the gap between the nav and content - the hateful 3 pixel jog bug in IE */
/* if I float this element in other browsers, the layout breaks - don't remove this comment \*/
* html #content { 
	/* float:left; 这是废的*/
	}
/* end of hack - don't remove this comment */
#footer {
	clear:both; /* makes the footer sit below whichever column is longest */
	background:#DDC; /* TEMP - REMOVE OR RESTYLE  */
	}
#header_inner, #nav_inner, #content_inner, #promo_inner {
	overflow:hidden; /* clips oversize elements that would otherwise expand divs and break the layout */
	}
#header_inner { 
	padding:1em 2em; /* creates space between the box  and the content */
	}
#nav_inner {
	padding:1em .5em; /* creates space between the box and the content */
	border-right:3px solid #B33;
	}
#content_inner { 
	padding:1em 1em 1em 1.5em; /* creates space between the box and the content */
	}
#footer_inner {
	padding:.5em 1em; /* creates space between the box and the content */
	text-align:center;
	}

效果1

效果2
去掉#content中margin-left:140px;注释

效果3
注释margin-left:140px,去掉float:left; 注释
firefox效果

ie7效果

效果4
注释margin-left:140px和float:left
并注释

总结1:
效果1,2,4可以看到#content元素的起始点是左上角,是因为#nav元素float起来了,float是会移出文档流的~~~,所以#content就成了#header后的元素.
总结2:
效果3,将#content元素float了,因为content元素无设width,所以其width等于其父元素,因而#nav的左边装不下它就下移了.
总结3:
效果1与效果4比较,发现效果4中,content元素的内容围绕nav元素.
看下面的例子更明显.
[1]

<!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" lang="en" xml:lang="en">
<head>
<title>Float demo</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="demo_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {background-color:#FFC;}
p {width:400px; margin:0; border:1px solid red; background-color:#FFF;}
img {float:left; margin:0 4px 4px 0;}
</style>
</head>
<body>
<p><img src="images/stylin_logo1.gif" alt="Stylin' logo" />Here is a
  paragraph of text and a floated image. The floated image moves up as high and to the left as it can within the parent element, body. With the image removed from of the document flow because it is floated,
  the paragraph (which is not floated) can also occupy the top left corner along with image, as the paragraph's
  red border shows. However, the paragraph's text wraps around the image to the right, because the image is floated left. Once the text gets below the image, it returns to its normal width.
  The floated element must appear directly before, or nested at the start of,
  the non-floated element in the markup for this effect to work.</p>
</body>
</html>

[2]

<!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" lang="en" xml:lang="en">
<head>
<title>Float demo</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="demo_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {background-color:#FFC;}
p {float:left; width:200px; margin:0; border:1px solid red; background-color:#FFF;}
img {float:left; margin:0 4px 4px 0;}
</style>
</head>
<body>
<img src="images/stylin_logo1.gif" />
<p>
Here is a paragraph of text. Because it is floated next to the floated image, it forms a column instead of wrapping around the text. 
Using the float property, you can create numerous columns side by side in this way. Note that floated block elements must have an specified width.</p>		
</body>
</html>