Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use float in CSS". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to use float in CSS" can help you solve the problem.

Float Usage in CSS

What does float mean?

float is floating, translated into Chinese also means floating. Go to the float manual in the CSS manual for basic float information.

Function of float

Floats are defined by CSS to float div style blocks to the left or right.

◆float syntax:

float:none|left|right

◆ Parameter value:

none: Object does not float

left: Object floats to the left

right: objects float to the right

Next, let's use a DIV+CSS example to explain float usage techniques.

DIV CSS Experiment 1

CSS style example content, we have text and images in a fixed width div layer, with blue background text content on the right and small images on the left.

CSS case demonstration final renderings are as follows

1. First, we set up a CSS selector named box with the outermost width of 300px and height of 200px. The CSS selector code is as follows (what does px mean)

.box{width:300px;height:200px;}

2. Set the CSS style of the text content part in the box to yangshi, and set the background to blue, the width to 120px, and float to the right.

.yangshi{width:120px;float:right;background:#0066FF;}

3. Set the picture to the left floating DIV+CSS style

img{float:left;}

4. div layout in body, code as follows

I am www.divCSS5.com, Test content div> div>

Description: The img tag here is a link to an external image named demo.gif

Screenshot of final presentation results

DIV CSS Experiment 2

Next we demonstrate using DIV+CSS to place the small image on the right (left in the previous example) and the blue background text on the left (right in the previous example)(extended CSS centered). Here we just need to change yangshi float:right; to float:left and image CSS style img{float:left;} to img{float:right;}

CSS code is as follows:

.box{width:300px;height:200px;} .yangshi{width:120px;float:right;background:#0066FF;} img{float:left;}

CSS code and content in html remain unchanged

The screenshot of the final demo results is as follows:

About "CSS float how to use" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.