Detailed explanation of CSS using float attribute to control div floating left and 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="demo.gif" / 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

 .box{width:300px; height:200px;}
.yangshi{ width:120px; float:right; background:#0066FF;}
img{ float:left;}

css video tutorial, html video tutorial)