Cascading model tables (CSS) are rapidly becoming the actual criteria for Web page layout and positioning. They are easy to use, do not require any special software, and can be applied on most major browsers. However, proper use of them requires a comprehensive understanding of the functional purpose of a particular layout, ensuring that the resulting stylesheet is used correctly logically and functionally and compatible with a variety of browsers and viewing devices.
In general, Web developers often fail to understand this particular problem of the model table, leading to the use of a large number of "hack" in the code to achieve the desired results. To solve this problem, it is worthwhile to spend some time to understand some of the core CSS drivers and concepts. One of the most important concepts developers need to understand is the so-called floating element, which plays an important role in aligning and locating page elements.
This article briefly describes these floating elements, explains the CSS float and clear commands, and provides some of their application instances to better position the HTML elements in the Web page.
Floating element
Basically, a float element is moved out of the normal flow of the Web page, which is "floating" in space, surrounded by some content. As a result, a left-floating element has text that moves on its right side and surrounds its bottom; a floating element on the right will move the content to its left.
The float property can take three possible values: left, which floats the element to the right, and then it makes the element float to one end, and none to remove the float. Applying the Float property to an element automatically converts it to a block-level element. Other non-model elements ignore the float as if it does not exist. If a float hits another float on the same side of the file in front of it, it must either hold the float to the right of the floating float (if there is enough space), or float underneath it (if there is not enough space).
Example 1: Wrapping text around an image
To better understand the float, let's look at a simple example: replace the align attribute of HTML with the float property of CSS. Look at the following example (List a), which floats a picture to the left and wraps it around with descriptive text:
List A
<style type= "Text/css" >
. Floater {
Float:left;
Border:solid 1px black;
padding:5px;
margin:5px;
width:100px;
height:75px;
}
</style>
<body>
Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation, Ullamco laboris ut nisi ex ea aliquip commodo. Duis aute irure dolor in Reprehenderit, voluptate velit esse cillum dolore eu fugiat nulla. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. Loremipsumdolor sitamet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation, Ullamco laboris ut nisi ex ea aliquip commodo. Duis aute irure dolor in Reprehenderit, voluptate velit esse cillum dolore eu fugiat nulla.
</body>
Figure A shows the output results.
In this case, the picture floats to the left, causing the surrounding content to flow to the right and then surround it. Also, when you change the size of the browser window, the size of the "box" where the text is saved is dynamically adjusted.
Example 2: Two-column layout with pictures on both sides
Let's look at a more complicated example and create a two-column layout with a picture and some text in each column (list B). To add interest, we set the picture in the left column to left-aligned and the picture in the right column to the right.
List B
<style type= "Text/css" >
div {
width:48%;
padding:5px;
}
IMG {
padding:5px;
margin:5px 15px 5px 5px;
width:100px;
height:75px;
}
</style>
<body>
<div style= "Float:left" >
Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation, Ullamco laboris ut nisi ex ea aliquip commodo. Duis aute irure dolor in Reprehenderit, voluptate velit esse cillum dolore eu fugiat nulla. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum.
</div>
<div style= "Float:right" >
Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlaboreetdolore magna. UT enim ad minim veniam, quis nostrud exercitation, Ullamco laboris ut nisi ex ea aliquip commodo. Duis aute irure dolor in Reprehenderit, voluptate velit esse cillum dolore eu fugiat nulla. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum.
</div>
</body>
Applying floats, it's not particularly difficult to implement this page: just create a <div> for each column, and then place a floating picture and some text in each <div>. Next, float <div> itself, one to the left, the other to the right. Figure B shows the output results.
Figure B
clear Element
A companion of the float property is the clear property, which controls the position of the element that follows a float. This property is used to prevent the content from following a floating element, forcing it to move to the next row of the float.
The clear property can take four values: left, which pushes the element below the previously generated floating element, right, which pushes the element below the previously generated, floating element, both, which pushes the element underneath all the elements that were generated earlier, and none, which cancels the previous position. Interestingly, the clear property is not limited to floating elements as people think, but it can also be used to control the behavior of floating elements and to push a floating element under other floating elements.
Example 3: Vertical picture bar, surround text around
To understand this, consider the following example (List C), which creatively uses the float and clear properties to vertically arrange a set of pictures.
List C
<style type= "Text/css" >
. Floater {
Float:left;
Clear:left;
Border:solid 1px black;
padding:5px;
margin:5px 15px 5px 5px;
width:100px;
height:75px;
}
</style>
<body>
Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation, Ullamco laboris ut nisi ex ea aliquip commodo. Duis aute irure dolor in Reprehenderit, voluptate velit esse cillum dolore eu fugiat nulla. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. Loremipsumdolor sitamet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation, Ullamco laboris ut nisi ex ea aliquip commodo. Duis aute irure dolor in Reprehenderit, voluptate velit esse cillum dolore eu fugiat nulla.
</body>
All of the pictures here are floating to the left, and the use of clear: a second picture of the Ieft property ensures that it is pushed under the first picture to establish a vertical structure. Note that the first picture also uses the clear property, but because it has no pictures on it, it has no effect. Using the Float property also guarantees that the text blocks in the page (which is important, it is not a model page) surround the picture bar.
The following is the output (Figure C):
Of course, these three examples are just the tip of the iceberg for floating element applications. With the float and clear properties, you can also implement more layouts and more flexible interface designs. However, the above example should give you an idea of the actual application of these attributes, and you should now have enough knowledge to start your own practice. Then what are you waiting for? Let's go--code happy!
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
