How to write left floating css

Css style float attribute is used to set the floating layout of label objects (such as:

label box, label, label, 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!

Related labels：

css

source：php.cn

Previous article：How to use css hanging-punctuation attribute Next article：How to use css outline-style attribute

Statement of this Website

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

Latest Articles by Author

• How to determine string type in python
  2019-06-20 10:20:19
• How to define integers in python
  2019-06-20 10:15:07
• How to use jam in python
  2019-06-20 10:08:31
• Where is idle in the python installation package?
  2019-06-20 10:01:17
• where is the python documentation
  2019-06-20 09:34:05
• How to draw precipitation map in python
  2019-06-21 15:03:24
• How to use python to develop mobile apps
  2019-06-19 09:41:36
• What are the python programming tools?
  2019-06-19 09:33:54
• Where to download python
  2019-06-19 09:26:29
• Where is the ide that comes with python?
  2019-06-19 09:18:16

Latest Issues

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1335

The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...

From 2024-04-06 21:58:04

0

1

800

Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...

From 2024-04-06 20:57:16

0

1

487

How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...

From 2024-04-06 20:45:26

0

2

386

Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...

From 2024-04-06 20:41:51

0

1

518

Related Topics

More>

• css
• css centered
• How to insert pictures in css
• css beyond display...
• css font color
• what is css
• How to write triangle in css
• css set text color