Detailed explanation of CSS using float attribute to control div floating left and right

This article brings you relevant knowledge about css, which mainly introduces the issues related to the float attribute controlling the left and right floating of divs. Floating, as the name suggests, means floating. It refers to the phenomenon that an element is separated from the document flow and suspended above the parent element. Let’s take a look at it. I hope it will be helpful to everyone.

(Learning video sharing: css video tutorial, html video tutorial)

一, what is float?

Floating, as the name suggests, means floating. Refers to the phenomenon of an element breaking away from the document flow and floating above the parent element.

Css style float attribute, used to set label objects (such as:

label box, label, label, label and other html tags) Floating layout, floating is what we call label objects floating to the left (float:left) and floating to the right (float:right).

The horizontal floating direction of the element means that the element can only move left and right but not up and down.

A floating element will try to move left or right until its outer edge touches the border of the containing box or another floating box.

Elements after the floated element will surround it.

Elements before the floated element will not be affected.

If the image is floated right, the text flow below will wrap to the left of it.

2. How to generate float?

Add the float attribute to the element itself

float value:

3. What is the role of floating?

Function: In the HTML document flow, it is divided into line elements, block elements and inline block elements.

Line elements and inline block elements are arranged horizontally, and blocks The elements are arranged from top to bottom in the form of a flow. When we want to arrange the block elements horizontally, we use our float.

When a float is added to a block-level element, the elements that should have been arranged vertically begin to be arranged horizontally, as shown in the following figure:

.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
<p class="box"> <p class="box1"> box1 </p> <p class="box2"> box2 </p> <p class="box3"> box3 </p> <p class="box4"> box4 </p> <p class="box5"> box5 </p> </p>

css div Floating other application cases

DIV CSS Experiment 1

Css style example content, we put the text and pictures in a fixed-width div layer, let the blue background text content be on the right, and the small picture on the left .

www.divcss5.com The final rendering of the CSS case demonstration is as follows

1. First, we set the width of the outermost layer to 300px and the height to 200px The css selector code named box is as follows (knowledge point px means)

.box{width:300px; height:200px;}

2. Set the css style of the text content part in the box to yangshi, and set the background to blue and the width to 120px, float on the right

.yangshi{ width:120px; float:right; background:#0066FF;}

3. Set the css style of the image to float on the left div

img { float: left;}

4. The div layout within the body, the code is as follows

 <div class="box">
<div class="yangshi">我是www.divcss5.com 网站，测试内容</div>
<img  src="/static/imghw/default1.png"  data-src="demo.gif"  class="lazy"   / alt="Detailed explanation of CSS using float attribute to control div floating left and right" >
</div>

Description: Here is the img tag It is a link to an external image, and the image name is demo.gif

Screenshot of the final demonstration result

##CSS Experiment 2

Next we will demonstrate the use The div css allows the small image here to be on the right (the previous example was on the left), and the blue background text content area is on the left (the previous example was on the right) (extended css center). Here we only need to change yangshi's float:right; to float:left and the image css style img { float: left;} to img { float: right;}

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 screenshot of the final demonstration result is as follows:

I hope that the above two css examples will help you understand float . I hope you all can try it out in practice!

css floating summary

We need to distinguish between text content left (text-align:left) and right (text-align:right) styles. Floating is only set to the left for html tags. Right float style. The float style does not have a centered (floating centered) style. If you need to center the label object, we will explain it in detail (css margin) in the text related to css layout centering. Remember here to use float:right when floating to the right, and float:left when floating to the left.

(Learning video sharing:

css video tutorial, html video tutorial)

##left	Elements float to the left.
right	The element floats to the right.
none	Default value. The element is not floated and appears where it appears in the text.
inherit	Specifies that the value of the float attribute should be inherited from the parent element.

The above is the detailed content of Detailed explanation of CSS using float attribute to control div floating left and right. For more information, please follow other related articles on the PHP Chinese website!