CSS floating attributes are easy to understand. It flexibly controls the display of block-level elements in a row and css floating

CSS floating attributes are easy to understand. It flexibly controls the display of block-level elements in a row and css floating

There are two commonly used CSS attributes in the page layout. They cleverly control the positions between block-level elements and allow them to display block-level elements in one row or start another row. Speaking of this, I believe you have guessed that these two attributes are the attributes that control the floating of block-level elements. During the entire page layout process, floating attributes are frequently used. Today, let's take you through these two magical CSS attributes.

Undertaking articles:Give full play to your personal strengths, learn front-end development in a down-to-earth manner, and learn from you

Technical Level: elementary | suitable for beginners of front-end development.

I. Floating attributes:

CSS technology uses the float attribute to realize the floating Effect of block-level elements.

Web Front-end/html5 Learning Group: 250777811

CSS technology uses the float attribute for floating Effect

This attribute can have the following values:

• Left: controls the left floating of block-level elements.

• Right: controls the right float of block-level elements.

Attribute description: we all know that each block-level element occupies one row by default. That is to say, two block-level elements closely linked in the Code are placed in one row on the previous line and the other on the next line. Although the size of block-level elements is set through the width and height attributes, the block-level elements cannot occupy the entire row, but the free position on the right side of the block-level element cannot contain any content.

Let's take a look at the following instances:

The HTML code is as follows:

<div id=”box01”></box>
<div id=”box02”></box>

The CSS code is as follows:

#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}

Shows the running result of the above Code. This figure shows the default placement of two block-level elements.

Displays the default positions of two block-level elements

What if I want to display two block-level elements in one row? This requires the appearance of the float attribute.

Add the following attribute to the CSS code of # box01: float: left. What will happen? After some practical operations, we will find that there are only red block-level elements on the screen. Where did the blue # box02 go? In fact, # box02 responded to the # box01 floating call and appeared in the same line with # box01, but was pressed under the red # box01.

The solution is to add the float: left attribute to the blue # box02. In this way, two block-level elements can appear in one row. This shows us the effect.

Web Front-end/html5 Learning Group: 250777811

Displays the left floating position of two block-level elements

Next let's look at another instance. In this instance, we add a container for two block-level elements.

The HTML code is as follows:

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

We set the container # box width to 400px. Two internal block-level elements:. The width of boxLeft is set to 150px, and the width of. boxRight is set to 100px. The two interior block-level elements must be displayed in one row and distributed to both ends of the container.

The CSS code is as follows:

#box{
width:400px; height:100px;
background-color:#cccccc;
}
#box .boxLeft{
width:150px; height:100px;
background-color:#ff5857;
float:left;
}
#box .boxRight{
width:100px; height:100px;
background-color:# 5857 ff;
float:right;
}

As we can see, on the. boxRight object, we added the CSS attribute of float: right to make the block-level element float right, then the element ran to the rightmost side of the container. This shows us the effect.

Displays the Left and Right floating positions of two block-level elements

Usage conclusions of floating attributes:

If you want to display multiple block-level elements in one row, these block-level elements must have the float floating attribute.

Ii. Clear floating attributes:

CSS technology uses the clear attribute to clear floating block-level elements.

Web Front-end/html5 Learning Group: 250777811

CSS technology uses the clear attribute to set the clear floating Effect

This attribute can have the following values:

• Left to clear the left floating Effect of block-level elements.

• Right to clear the right floating Effect of block-level elements.

• Both to clear the floating effects at both ends of block-level elements.

Attribute description: Based on the usage of the above float attribute, we can imagine a block-level element that follows the block-level element with floating attributes, even if it does not want to display block-level elements in a row with the block-level elements in front of it, it will be affected by the floating attribute of the block-level elements in front of the block-level elements.

To solve this problem, you can clear floating attributes for block-level elements that do not want to be displayed in the same row as the previous block-level elements.

 

Let's take a look at this example:

The HTML code is as follows:

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

The CSS code is as follows (# box. boxRIght ):

#box .boxRight{
width:100px; height:100px;
background-color:# 5857ff;
clear:left;
}

Because. boxRight has the clear: left attribute, even if. boxLeft uses the float: left attribute, they are still distributed in two rows and will not be displayed in the same row. It seems that no floating effect has been used.

 

Web Front-end/html5 Learning Group: 250777811

Welcome to follow this public account → [web Front-end EDU] and learn the front-end together! You are welcome to leave a message to discuss and forward it together.