What is the method of css floating?

In CSS, you can use the float attribute and set the "float:left" or "float:right" style to float elements. Once an element is floated, it will be able to be placed side by side, and the width and height can be set, regardless of whether it was originally a block-level element or an inline element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The original purpose of floating float is to achieve text wrapping effect

Floating syntax: float:left/right;

Use float:left or float: right or both are floats that will be generated.

The nature of floating

Floating is the most commonly used attribute for layout in CSS.

Now there are two divs, set the width and height respectively. We know that their effects are as follows:

At this time, if you add a floating attribute to these two divs, such as float: left;, the effect As follows:

This achieves the floating effect. At this time, the two elements are side by side, and both elements can set the width and height (this cannot be achieved in the standard flow in the previous paragraph).

If you want to learn floating well, you must know three properties. Let’s talk about it next.

Property 1: Floating elements are out of standard

Off standard means out of standard flow. Let's look at a few examples.

Proof 1:

In the picture above, by default, the two div tags are arranged up and down. Now due to the float attribute, the first <div> tag in the above picture appears to be floating, so this tag is arranged on another level. The second <div> is also arranged according to the standard flow on its own level.

Proof 2:

In the above figure, the span tag cannot be set in width and height in the standard flow (because it is an inline element). However, once it is set to float, the width and height can be set even without converting it to a block-level element.

So it can prove one thing: Once an element is floated, it will be able to be side by side, and the width and height can be set. No matter it turns out to be a div or a span. All tags, after floating, no longer distinguish between inline and block levels.

Property 2: Floating elements are close to each other

Let’s look at an example to understand.

After setting the float: left; attribute for all three divs, we then set the width and height. When changing the size of the browser window, you can see the snapping effect of the div:

The above picture shows that if there is enough space for No. 3, it will be close to No. 2 . If there is not enough space, it will lean on big brother No. 1.
If there is not enough space to lean against Brother No. 1, No. 3 will stick to the left wall by himself.

But when No. 3 sticks to the wall by himself, please note:

The picture above shows that when No. 3 sticks to the left wall, he will not go to 1 It's crowded inside.

Similarly, float also has an attribute value of right, which is symmetrical to the attribute value of left.

Property 3: Floating elements have a "word circumference" effect

You will understand it if you look at a picture. We let div float and p not float.

In the picture above, we found that: div blocks p, but does not block the text in p, forming a "word circumference" effect.

Summary: Text in the standard stream will not be obscured by floating boxes. (Words are like water)

Regarding floating, we have to emphasize one point. To avoid confusion, we must follow a principle in the early stage: It is never a thing that floats alone. Floating is all Floating together, floating, everyone floating.

Property 4: Shrink

Shrink: A floating element, if width is not set, will automatically shrink to the width of the content (this is very similar to inline elements).

For example:

In the above picture, the div itself is a block-level element. If width is not set, it will occupy the entire row alone; however, setting After the div is floated, it will shrink

Floating supplement (pay attention when making a website)

As shown in the above picture, set para1 and para2 to float, they are the sons of div. At this time, the width of para1 para2 is smaller than the width of div. The effect is shown in the picture above. But if the width of para1 and para2 is set to be greater than the width of the div, we will find that para2 falls:

css video tutorial )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 970px;
height: 103px;
/*居中。这个语句的意思是：居中：*/
margin: 0 auto;
}
.header .logo{
float: left;
width: 277px;
height: 103px;
background-color: red;
}
.header .language{
float: right;
width: 137px;
height: 49px;
background-color: green;
margin-bottom: 8px;
}
.header .nav{
float: right;
width: 679px;
height: 46px;
background-color: green;
}

.content{
width: 970px;
height: 435px;
/*居中，这个语句今天没讲，你照抄，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
.content .banner{
float: left;
width: 310px;
height: 435px;
background-color: gold;
margin-right: 10px;
}
.content .rightPart{
float: left;
width: 650px;
height: 435px;
}
.content .rightPart .main{
width: 650px;
height: 400px;
margin-bottom: 10px;
}
.content .rightPart .links{
width: 650px;
height: 25px;
background-color: blue;
}
.content .rightPart .main .news{
float: left;
width: 450px;
height: 400px;
}
.content .rightPart .main .hotpic{
float: left;
width: 190px;
height: 400px;
background-color: purple;
margin-left: 10px;
}
.content .rightPart .main .news .news1{
width: 450px;
height: 240px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news2{
width: 450px;
height: 110px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news3{
width: 450px;
height: 30px;
background-color: skyblue;
}
.footer{
width: 970px;
height: 35px;
background-color: pink;
/*没学，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div>
<div>logo</div>
<div>语言选择</div>
<div>导航条</div>
</div>

<!-- 主要内容 -->
<div>
<div>大广告</div>
<div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</div>
<div></div>
</div>
</div>

<!-- 页尾 -->
<div></div>
</body>
</html>

The clearing of floating mentioned here , refers to clearing the impact between floats.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{

}
li{
float: left;
width: 100px;
height: 20px;
background-color: pink;


}
</style>
</head>
<body>
<div>
<ul>
<li>生命壹号1</li>
<li>生命壹号2</li>
<li>生命壹号3</li>
<li>生命壹号4</li>
</ul>
</div>
<div>
<ul>
<li>许嵩1</li>
<li>许嵩2</li>
<li>许嵩3</li>
<li>许嵩4</li>
</ul>
</div>
</body>
</html>

clear:both;

overflow:hidden;