Home  >  Article  >  Web Front-end  >  How to write left floating css

How to write left floating css

anonymity
anonymityOriginal
2019-05-28 10:19:217634browse

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).

How to write left floating css

#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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn