About the usage of float property float in CSS "code example"

When we are in the layout of the page, we often use the CSS floating property is the float property, then for the novice, this piece of knowledge must be mastered. Otherwise the complete page is difficult to complete. Then this article will give you a detailed description of the CSS float properties of the specific use. We hope to help you.

Let's give you a detailed description of the code examples below.

First, CSS floating property-float right Property code example

<! DOCTYPE html>
In the above code, I set two img images in the Div, and without adding the float right property style to the picture, the effect is like 1:


After we add the float right property to the IMG image, the effect is 2:



I believe you have found some changes in the comparison between Figure 1 and Figure 2. When the CSS float property is not set in Figure 1, the two IMG images are displayed from left to right in the same row, and there is a gap between the two pictures. And in Figure 2 we added the Float property float right, and the two IMG elements begin to float in a floating arrangement, with no gaps. At this point, if we need to have clearance, then we should use the Padding property. So we can tell that theCSS floating property, float, can control the element to the right by setting its value .

Second, CSS floating property-float Left Property code example

<! DOCTYPE html>
In the above code, we set up two div blocks, respectively, in different colors, if the float property is not set, the effect is as 3:



Then we set the float left property, after the browser access, the effect, such as 4:



In contrast to Figure 3 and Figure 4, we can clearly see that the DEMO1 element floats to the left. Similarly, if we want to have a gap between the two elements, we can do so by padding the margin property.

In summary, the CSS float property is able to control any element to the left and right. The CSS float property can be used not only to control the picture floating, but also to control the text float. "You can refer to the topic.alibabacloud.com online tutorial: CSS 0 Basic Getting Started Tutorial-css float (floating)"