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>
分享到：
相关推荐
- `:focus-within` 伪类：当输入框或者其子元素获得焦点时应用样式，使标签在用户开始输入时浮动。 - `transition` 属性：定义了样式变化的过渡效果，如标签位置和颜色的变化。 - `transform` 属性：用于改变元素的...
在前端开发中，浮动标签（Float Label）模式是一种常见的表单设计方式，它能提高用户在填写表单时的交互体验。"float-label-css"是一个专门用于实现这种效果的CSS库，通过纯CSS代码实现标签的浮动效果，使得输入框在...
"Atten_2": (float(df.iloc[8, 10]), float(df.iloc[8, 11])), "Atten_3": (float(df.iloc[9, 10]), float(df.iloc[9, 11])), "VSWR_1": (float(df.iloc[10, 10]), float(df.iloc[10, 11])), "VSWR_2": (float...
Multithreading enables the concurrent execution of multiple threads within a program. This chapter introduces multithreading concepts and techniques in Java, including thread creation, synchronization...
Handling Exceptions Within an Expression Recipe 4.23. Ensuring a Name Is Defined in a Given Module Chapter 5. Searching and Sorting Introduction Recipe 5.1. Sorting a Dictionary Recipe 5.2....
- Warp reduce functions have been introduced to simplify the implementation of reduction operations within a warp. These functions provide efficient ways to perform common reduction operations like ...
// Check if the touch position is within the clear button area if (getText() != null && getText().length() > 0 && x >= (getRight() - mClearBtnWidth) && x () && y >= getTop() && y ()) { setText("")...
retrieved and SendMessage is a boolean function (maybe someone has pressed the cancel btn).- Fixed a bug when the subject field is too large.9/2/981.5.1- Fixed a bug with a message within a message ...
The PL/SQL function result cache is a new feature that caches the results of a function call based on its input parameters. This can significantly improve the performance of applications by avoiding ...
* as part of a programmatically initiated smooth scroll or a user * initiated touch scroll. * * @param position * Position index of the first page currently being * displayed. Page ...
In C#, every piece of code is encapsulated within a class, and classes are grouped into namespaces. Unlike C++, where declaration and implementation are separated into header (.h) and implementation ...
createctrl.zip A float button control<END><br>70,SysPCase.zip This Is An OCX File That Will Allow a user to start typing and when textbox loses focus the OCX will make all text that user typed ...
- **Const Qualifier**: Specifying that a parameter should not be modified within the function. Functions are essential for breaking down large programs into smaller, manageable pieces and for reusing...
<summary>FloatObjectAccessor class provides access to a Float object within an Accessable object.</summary> - (System.Int32)"> <summary>FloatObjectAccessor constructor.</summary> ...
A filter is an object that performs filtering tasks on either the request to a resource (a servlet or static content), or on the response from a resource, or both. Filters perform filtering in the ...
- **Function**: Executes a function within a transaction with custom retry logic. - **Parameters**: - `retries`: The number of times to retry the transaction if it fails. - `function`: The function ...
- `CImg<T>` is a template class that represents a single image, where `T` is the pixel data type (e.g., `unsigned char`, `float`). - It supports different pixel formats such as grayscale, RGB, RGBA, ...