float within a float

最新推荐文章于 2025-12-26 14:24:35 发布

原创最新推荐文章于 2025-12-26 14:24:35 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml

javascript/html 专栏收录该内容

18 篇文章

订阅专栏

本文通过几个例子解释了CSS浮动如何与周围元素互动，包括正常文档流、浮动图像、清除浮动等概念。

http://www.cssnewbie.com/css-float-property/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Newbie Example: Understanding CSS Floats</title>
<style>
/* Non-example-related stuff. */
body {
   font: small/1.4 Arial, Helvetica, sans-serif; }
#wrap {
   width: 400px;
   margin: 0 auto; }
   
/* Example CSS starts here. */
.container {
   margin: 1em 0;
   border: 2px solid red;}
.container.float {
   width: 396px; }
.float {
   float: left; }
.clear {
   clear: left; }
img {
   border: 2px solid green; 
   margin: 0 .5em 0 0; }
h2 {
   clear: left;
   margin: 1em 0 0; }
</style>
</head>
<body>
<div id="wrap">

<h1>Understanding CSS Floats</h1>

<p>CSS floats can be a tricky topic to understand. Here are a few examples to help explain how floats interact with their surrounding elements. Our containing div has a red border, while our image has a green border.</p>
<p><a href="http://www.cssnewbie.com/css-float-property/">See the original CSS Newbie article here.</a></p>

<h2>Normal Document Flow</h2>
<div class="container">
   <img src="http://farm3.static.flickr.com/2314/2273672714_2a0d8dd526_m.jpg" />
   <p>This paragraph is inside a div and follows an image. The image is not floated, so this is the normal document flow.</p>
</div>

<h2>Floated Image</h2>
<div class="container">
   <img src="http://farm3.static.flickr.com/2314/2273672714_2a0d8dd526_m.jpg" class="float" />
   <p>In this example, the image has been floated to the left. Notice how the document flow has changed: our text is wrapping around the image, but our container is only as tall as our non-floated element requires.</p>
</div>

<h2>Clear Following a Float</h2>
<div class="container">
   <img src="http://farm3.static.flickr.com/2314/2273672714_2a0d8dd526_m.jpg" class="float" />
   <p>Here our image has been floated, which makes the text wrap around, but now we've done something different.</p>
   <p class="clear">This paragraph has been cleared, which changes the size of our containing element yet again.</p>
</div>

<h2>Float Within a Float</h2>
<div class="container float">
   <img src="https://icons.duckduckgo.com/i/ae6e124c.jpg" class="float" />
   <p>In this example, both our container and the image are being floated. Notice that the image now defines the height of the float!</p>
</div>

<p>Photo by Auzigog. Used under a Creative Commons license. <a href="http://www.flickr.com/photos/eyermonkey/2273672714/">See the original here.</a></p>
</body>
</html>