In page design, the use of float and clear attributes is crucial when CSS is used to control the layout. The following is a summary of the content I have learned and compiled on the Internet.
First, you must understand two things:
1. the browser displays the object in the stream layout according to the object declaration sequence in the HTML code.
2. almost all objects in HTML are divided into two types by default: block objects and in-line objects. the default display status of a block occupies the entire row. The in-line object is the opposite, allowing other objects to be displayed in one row.
The float attribute is used to change the default display mode of the block object. After the float attribute is set for the block object, it no longer occupies one row.
Let's take a look at the following example. Code:
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Style>
. Left
{
Background-color: # cccccc;
Border: 2px solid #333333;
Width: 200px;
Height: 100px;
}
. Leftfloat
{
Background-color: # cccccc;
Border: 2px solid #333333;
Width: 200px;
Height: 100px;
Float: left;
}
. Right
{
Background-color: # cccccc;
Border: 2px solid #333333;
Height: 100px;
}
</Style>
</Head>
<Body>
<Div class = "Left"> Div left float: None </div>
<Div class = "right"> Div right </div>
<Div class = "leftfloat"> Div left float: Left </div>
<Div class = "right"> Div right </div>
<SPAN class = "Left"> span left float: None </span>
<SPAN class = "right"> span right </span>
</Body>
</Html>
The running result is as follows:
It can be seen that a separate block element occupies only one row, for example, the first Div and the second Div. After float is used, the two divs are displayed in the same row. but span is not. Even if float is not used, it is displayed in the same row.
When will clear be used?
When the attribute is set to float, the physical location of the object is already out of the document flow. However, most of the time, we want the document flow to recognize float or float.
(Dynamic) The elements behind it are not affected by float (floating). In this case, we need to use clear: Both; To clear: both;
Example:
<P style = "float: Left; width: 100px;"> This is the 1st column. </P>
<P style = "float: Left; width: 400px;"> This is the 2nd column. </P>
<P> This is under the column. </P>
If you do not need to clear the float, the 3rd <p> text will be in line with the first two lines.
So we add a clear float in the 3rd S.
<P style = "float: Left; width: 100px;"> This is the 1st column. </P>
<P style = "float: Left; width: 400px;"> This is the 2nd column. </P>
<P style = "clear: Both;"> This is under the column. </P>
How to Use CSS float and clear to create a three-column liquid layout the three-column layout is currently the most common web page layout. The main page content is placed in the middle column, place navigation links and other content in the two columns on the edge.
The basic layout is generally to place three columns under the title, the three columns occupy the width of the entire page, and finally put the footer at the bottom of the page, the footer also occupies the entire page width.
Most web designers are familiar with traditional web design technologies, which can generate tables, create a fixed-width layout, or "liquid" (it can be automatically scaled based on the user's browser window width) the layout of the web page.
Now, we have all begun to abandon the table-based layout technology. Many network designers are looking for ways to create a three-column layout from the new example of XHTML markup and CSS format. From
It is not difficult to get a fixed-width layout in CSS, but it is difficult to get a liquid layout. Therefore, this article describes how to use the float and clear attributes of CSS to obtain the three-column liquid layout.
Method.
Basic Method
The basic layout contains five Divs, namely the title, footer, and three columns. The title and footer occupy the entire page width. The left column Div and right column Div are both fixed-width, and they are squashed to the cursor using the float attribute.
The left and right sides of the browser window. The middle column actually occupies the entire page width, and the content in the middle column is "Flowing" between the left and right columns ". The width of the DIV in the middle column is not fixed, so it can be changed according to the browser window
Perform necessary scaling. The padding attribute on the left and right of the column Div ensures that the content is arranged in a neat column, even when it is stretched to the bottom of the sidebar (left or right)
Sample.
An example of three-column layout
Take a look at the three-column layout example using the technology described in this article. This example uses bright colors to differentiate the layout of each Div. The following is the XHTML code:
<Body>
<Div id = "Header">
<H1> header </Div>
<Div id = "Left">
Port side text...
</Div>
<Div id = "right">
Starboard side text...
</Div>
<Div id = "Middle">
Middle column text...
</Div>
<Div id = "footer">
Footer text...
</Div>
</Body>
The following is the CSS code:
Body {
Margin: 0px;
Padding: 0px;
}
Div # header {
Clear: both;
Height: 50px;
Background-color: Aqua;
Padding: 1px;
}
Div # Left {
Float: left;
Width: 150px;
Background-color: red;
}
Div # right {
Float: right;
Width: 150px;
Background-color: green;
}
Div # middle {
Padding: 0px 160px 5px 160px;
Margin: 0px;
Background-color: Silver;
}
Div # footer {
Clear: both;
Background-color: yellow;
}
Code Description
The order of each part in HTML code is very important. The left column and right column Div must appear before the middle column. In this way, the two sidebar can be moved to their positions (on both sides of the screen), and
The content will "stream" into the space between them. If the browser finds a middle column before one or two sidebar Divs, the middle column occupies one or both sides of the screen, so that the floating part will run to the bottom of the middle column.
Area instead of the middle column.
The clear: Both statement in Div # header and Div # footer style (style) is used to ensure that the floating part does not occupy the space of the title and footer.
The padding: 1px statement in the DIV # Header style is used to remove abnormal edges in the background color of the page header. If the padding is set to zero
This exception is displayed.
The float: Left statement in the DIV # Left style is used to squeeze the left column to the left. Width: 150px declaration is used to set the fixed width of the column, but you can also set its width
Set it to another specific value. Similarly, the float: Right statement in the DIV # Right style is used to squeeze the right div to the right. In this example, float completely compresses the left and right columns.
To the left and right sides of the browser window. However, if these divs are contained by other Divs, float will squeeze them to the edge of the divs that contain them.
In the DIV # Middle style, clear declares that the content in the column is "Flowing" between two sidebar. Padding: 0px 160px 5px 160px declares that the padding to the left and right columns is set, so that a column Div with a width of 150 pixels can be added with a 10-pixel padding.
This example is very rough and simple, but it demonstrates the basic technology of using a floating Div to create a three-column liquid layout.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
