Home > Developer > Web Develop
The float (float) of the CSS moves the element left or right, and the elements around it are rearranged.
Float (float) is often used for images, but it is as useful in layout.
Include Block:
Before we explain the detailed details of float, we need to understand a concept first.
Include Box: The containing box of a floating element is the nearest block-level ancestor element to a floating element
HTML code:
123456 |
<class="box" > class="Float-ele" > floating elements </span> Ordinary document flow Ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow Normal documents flow ordinary document stream plain document flow Ordinary documents stream general document flows common document streams plain flow </div> |
CSS code:
12 |
. box{Background #00ff90;Padding 10px; width: 500px;} .float-ele { Float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: Center;} |
The horizontal direction of the element floats, meaning that the element can only move left and right without moving up or down.
A floating element moves as far as possible to the left or right until its outer edge touches a border containing a block or another floating box (the border is a box model border, considering factors such as Padding,margin).
Elements that follow the floating element will surround it. (even if the block element is floating around it, as in the example above, change the span to a div, the effect is the same)
Elements before the floating element will not be affected.
If the image is floating right, the following text flow will wrap around its left side:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Rookie Tutorial (runoob.com) </title>
<style>
Img
{
Float:right;
}
</style>
<body>
<p> in the following paragraphs, we have added a picture of <b>float:right</b>. Causes the picture to float to the right of the paragraph. </p>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
If you put a few floating elements together, if there is space, they will be adjacent to each other.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Rookie Tutorial (runoob.com) </title>
<style>
. thumbnail
{
Float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
<body>
<p> try adjusting the window to see what happens when the picture doesn't have enough space. </p>
</body>
If you do not set margin, the picture will be just adjacent, no gaps
The total width of the first line of the picture exceeds the width of the containing block to wrap automatically (the outer edge touches the containing block)
Clear float-use clearAfter the element floats, the surrounding elements are rearranged, in order to avoid this situation, use the clear property.
The Clear property specifies that no floating elements can appear on either side of the element.
Use the Clear property to add a picture gallery to the text:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Rookie Tutorial (runoob.com) </title>
<style>
. thumbnail
{
Float:left;
width:110px;
height:90px;
margin:5px;
}
. text_line
{
Clear:both;
margin-bottom:2px;
}
</style>
<body>
<p> try adjusting the window to see what happens when the picture doesn't have enough space. .</p>
</body>
Run See effect
CSS Float (float)
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
