Home > Article > Web Front-end > How to write left floating css
Css style float attribute is used to set the floating layout of label objects (such as: dc6dce4a544fdca2df29d5ac0ea9906b label box, 45a2772a6b6107b401db3c9b82c049c2 label, 3499910bf9dac5ae3c52d5ede7383485 label, 907fae80ddef53131f3292ee4f81644b 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.
The role of float
Define float (float) through CSS to let the div style layer block float to the left or right (lean).
Float is often followed by the attribute values left, right, and none
Float:none does not use float
Float:left floats to the left
Float:right Right float
float syntax:
float : none | left |right
Parameter value:
none : The object does not float
left : Object floats on the left
right : Object floats on the right
Case:
We set up a box, There are two boxes floating, one on the right and one on the left. In order 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:
<div class="divcss5"> <div class="divcss5_left">布局靠左浮动</div> <div class="divcss5_right">布局靠右浮动</div> <div class="clear"></div><!-- html注释:清除float产生浮动 --> </div>
2、css代码片段: .divcss5{ width:400px;padding:10px;border:1px solid #F00} .divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} .divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} .clear{ clear:both}
The above is the detailed content of How to write left floating css. For more information, please follow other related articles on the PHP Chinese website!