Div CSS float usage (left right)

I was deeply impressed by the effects of floating in my video. Now I am more and more fond of B/S and more willing to learn, especially when looking at the web page, I am very familiar with the code. I just want to share it with you through my website.

 

In Div + CSSFloatUnderstanding andCSS floatUsage, div CSS float usage and float Learning

Float floating attribute of CSS styles, used to set tag objects (such as <div> tag box, <span> tag, <A> tag, <em> tag, and other HTML tags) floating layout. Floating is what we call label object floating to the left (Float: left) And float to the right (Float: Right).

What does float mean?
Float is floating, and Translation into Chinese is floating. Go to the corresponding CSS manual to learn the basic information about float.

The role of float
Use CSS to define float (float) to float the DIV Style Layer block to the left or right (.

Float floating tutorial directory

1. Float syntax
2. Float application and usage
3. Float floating case
4. Other CSS floating applications
5. CSS floating Summary

I. Float syntax- Top

Float often follows the attribute values left, right, and none.
Float: None
Float: Left float
Float: right float to the right

Float Syntax:
Float: None | left | right

Parameter value:
None: the object is not floating.
Left:Object floating on the left
Right:Object floating on the right

 

Float Floating Structure Analysis

Next, we will use a div + CSS instance to explain how to use float.

Ii. Float application and usage- Top

Float floatingThis parameter is used to set the floating style between the left and right sides of an object, so that the DIV, span, and other labels can move left to the right.

Simple syntax

 
 

  
  
Div {float: Left}/* CSS Note: Set the DIV object floating to left (left )*/
  
  
Div {float: right}/* CSS Note: Set the DIV object floating to right (right )*/
 
 

Iii. Case study of CSS float- Top

We set a box with two boxes floating on the right and on the left. To intuitively see the CSS floating layout effect, we set a certain width, height, and border for the two boxes.

1. Major HTML code snippets:

 
 

  
  
<Div class = "divcss5">
  
  
<Div class = "divcss5_left"> move the layout to the left </div>
  
  
<Div class = "divcss5_right"> move the layout to the right </div>
  
  
<Div class = "clear"> </div> <! -- HTML comment: Clear float to generate float -->
  
  
</Div>
 
 

2. CSS code snippet:

 
 

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

3. Effect

Case study of CSS Div floating float usage

IV. Other cases of CSS + Div floating (rest and read )- Top

Div CSS Lab 1
CSS style instance content. We place the text and image in a fixed-width Div layer, so that the blue background text content is right and the small image is left.
The example of www.divcss5.com CSS is as follows:

1. First, we set the CSS selector code for the outermost layer with a width of PX and a height of PX named box as follows (what is the meaning of PX in knowledge points)
. Box {width: 300px; Height: 200px ;}

2. Set the CSS style in the text content section of the box to yangshi, set the background to blue, the width to 120px, and move to the right
. Yangshi {width: 120px; float: Right; Background: # 0066ff ;}

3. Set the left floating Div + CSS style of the image
IMG {float: Left ;}

4. Div layout in the body. The Code is as follows:

<Div class = "box"> <Div class = "yangshi"> I am a website www.divcss5.com, test content </div> </Div>

Note: here, the imgtag is a link-based external image, and the image name is demo.gif.

Final Demonstration Result

 

CSS Experiment 2
Next we will demonstrate how to use Div + CSS to make the small image right (the previous example is left), and the blue background text content area left (the previous example is right) (the expanded CSS center ). Here we only need to change the float: Right of yangshi to float: Left and the image CSS style IMG {float: Left;} to IMG {float: Right ;}
The CSS code is as follows:

. Box {width: 300px; Height: 200px ;} . Yangshi {width: 120px; float: Right; Background: # 0066ff ;} IMG {float: Left ;}

The CSS code and content in HTML remain unchanged.
The final demonstration result is as follows:
 

The above two CSS instances are helpful for learning float.

V. CSS floating Summary- Top

We need to distinguish the text content from the text content to the left (text-align: Left) to the right (text-align: Right) style. Floating only sets the left-to-right floating style for HTML tags. Float floating styles do not depend on the middle (floating Center) style. If you need to center the tag object, you need (CSS margin) knowledge. Remember to use float: Right to float and float: left to make our webpage design more beautiful and beautiful.