label and other html labels), Floating is what we call label objects floating to the left (float:left) and floating to the right (float:right).
What does float mean?
float means floating, and it also means floating when translated into Chinese. Go to the float manual in the corresponding css manual to learn about the basic information about float.
The role of float
Defining float (floating) through CSS allows the div style layer block to float to the left or right (lean).
float floating tutorial directory
float syntax
float application and usage
float floating case
css floating other applications
css floating summary
float syntax
Float is often followed by attribute values left, right, none
Float:none does not use float
Float: left Float to the left
Float:right Float to the right
float syntax:
float : none | left |right
Parameter value:
none : The object does not float
left : The object floats on the left
right : The object floats on the right
Next, let’s explain float through a div+css example skills.
float application and usage
Float float is used to set the left and right floating styles of objects. It can achieve what we need to make DIV, SPAN and other labels float left and right.
Simple usage syntax
div{float:left} /* css comment: Set the div object to float to the left (left) */
div{float:right} / * css comment: Set the div object to float to the right (right) */
css float case
We set up two boxes in a box, one floating on the right and one floating on the left. To intuitively see the CSS floating layout effect, we set a certain width, height and border for the two boxes.
1. Main html code snippet:
Layout to the left Floating
Layout floating to the right
2. CSS code snippet:
.div { width:400px;padding:10px;border:1px solid #F00}
.div _left{ float:left;width:150px;border:1px solid #00F;height:50px}
.div _right{ float:right;width:150px;border:1px solid #00F;height:50px}
.clear{ clear:both}
The float usage of CSS operation DIV is as follows There are so many, friends who need them can save them, and please continue to pay attention to other updates on this site.
Related reading:
How to set min-width and max-width of CSS
What is the role of CSS margin
How to make rounded corners in CSS3
The above is the detailed content of CSS float usage for operating DIV. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
