1. Float is an important concept in CSS. Float involves left float, right float, and clear float.
For example, before we do not float:
Code: HTML:
<! Doctype html
Public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<LINK rel = "stylesheet" type = "text/CSS" href = "float.css">
<Title> floating exercise </title>
</Head>
<Body>
<Div class = "fdiv">
<Div class = "div1" id = "special"> div1 </div>
<Div class = "div1"> div2 </div>
<Div class = "div1"> div3 </div>
<Div>
</Body>
</Html>
CSS file:
/*
Body {
Border: 1px solid red;
Width: 500px;
Height: 500px;
Margin: 0px auto;
}
*/
. Fdiv {
Border: 1px solid red;
Width: 500px;
}
. Div1 {
Border: 1px solid blue;
Background: pink;
Width: 100px;
Height: 80px;
Margin: 5px 0px 5px 5px ;;
}
/*
# Special {
Float: right;
}*/
A. float on the right: an element moves right to make its own space, and moves right until it hits the rightmost edge of its parent element.
This effect mainly changes the CSS file (comment out the ID selector of div1 ):
/*
Body {
Border: 1px solid red;
Width: 500px;
Height: 500px;
Margin: 0px auto;
}
*/
. Fdiv {
Border: 1px solid red;
Width: 500px;
}
. Div1 {
Border: 1px solid blue;
Background: pink;
Width: 100px;
Height: 80px;
Margin: 5px 0px 5px 5px ;;
}
# Special {
Float: right;
}
B. left floating: Move all elements to the left.
If the height is different, it will be stuck when moving down, and there is enough space for it to be placed behind. If not, it will be placed in another row.
Now we can understand floating:
If an element needs to float on the left or right, 1. It also moves on the left or right, knowing that it is hitting the border or hitting other floating elements.(Note: floating is equally valid for block and row elements.)
2. If an element floats to the left/right, it is equivalent to giving up its own left/right, and other elements are arranged on its left/right.
C. Clear the float: After learning in the later stage, add it.
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
