How to use the float attribute of css? Detailed explanation of css floating attribute float-CSS Tutorial-php.cn

How to use the float attribute of css? Detailed explanation of css floating attribute float

不言

Release： 2018-10-30 13:32:03

Original

5283 people have browsed it

The float attribute in CSS is often used in web development, but how to use the float attribute in CSS? Many friends may be confused about this. This article will give you a detailed explanation of the usage of the float attribute in CSS.

First of all, let’s take a brief look at the float attribute in CSS

The float attribute, as the name suggests, is a floating attribute. Elements with the float attribute set will float to the left or right according to the attribute value. We call it setting Elements with the float attribute are floating elements.

Using the above words, it feels actually relatively abstract. Let’s learn more about the float attribute from the usage of the float attribute in CSS.

Let’s first look at an application example of the float attribute

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
img 
{
    float:right;/*向右*/
    /*float: left;向左*/
}
</style>
</head>
<body>
<p>
    <img  src="image/timg.jpg"    style="max-width:90%"  style="max-width:90%" / alt="How to use the float attribute of css? Detailed explanation of css floating attribute float" >
好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
</p>
</body>
</html>

Copy after login

In the above code, we gave the image a float:right attribute, which caused the image to float on the right side of the paragraph. The effect is as follows:

How to use the float attribute of css? Detailed explanation of css floating attribute float

This is the function implemented by the float attribute, but in the actual application process, the float attribute affects not only itself, but also the surroundings. The elements surround it, so at this
time, you need to clear the impact of floating.

Regarding how to clear floating CSS, you can refer to these two articles to solve this problem. The content is very detailed, so I won’t go into details here.

What are the methods to clear floating in css? Introduction to four methods of css float clearing

#What does css float mean? The principle of css floating and the method of css clearing floating (with code)

The above is the detailed content of How to use the float attribute of css? Detailed explanation of css floating attribute float. For more information, please follow other related articles on the PHP Chinese website!