Assume that a page contains three Div blocks, which are arranged as follows:
Figure 1: Do not use floating
Figure 2: float to the right
Figure 2 shows that frame 1 moves from the document to the right until its right edge hits the right edge of the contained box.
Figure 3: Float left
Figure 3 shows that frame 1 floats to the left and moves from the document to the left until its left edge hits the left edge of Frame 2. Because frame 1 is out of the document stream, it does not occupy space, box 2 is in the text stream, So box 1 overwrites box 2.
The above three figures show that float can be left or right until its outer edge hits the border of the contained box or another floating box. Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.
The following code is used for implementation:
<! 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">
The effect is as follows:
In this example, we set the image to float left.
2. How to clear the floating point?
Clear is a float attribute.
Syntax:
Clear: none | left | right | both
Valid value:
None: default value. Allow floating objects on both sides
Left: Float objects on the left are not allowed.
Right: Float objects on the right are not allowed.
Both: Float objects are not allowed.
The clear floating (clear) of CSS must be kept in mind: This rule can only affect the elements used to clear, and cannot affect other elements.
Example:
<! 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">Effect:
Iii. CSS floating Summary
Floating can make the block-level labels in the same row, but because the floating is out of the document position, if the floating layer has a non-floating parent layer, the father layer cannot hold the floating layer, you have to clear the float. This article briefly introduces CSS floating, and more content is waiting to be mined.
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
