Summary of definition and usage of floating attribute functions

To introduce the float attribute of CSS, you must first understand the standard document flow. Standard document flow: Without the intervention of CSS, block-level elements occupy an exclusive line. You can set the width and height, and the in-line elements are displayed side by side, and the width and height are automatically filled. . The standard document flow (default layout) of an HTML page is: from top to bottom, from left to right, with line breaks when encountering blocks (block-level elements). The initial use of the float attribute was to wrap the target content with text, which is often seen in newspapers. Later, it was mostly used to arrange the content side by side horizontally. Floating layer: After assigning a value to the float attribute of the element, It is to break away from the document flow, float left and right, and stick to the left and right borders of the parent element (the default is the body text area). Introduction to float attributes: left: The element floats to the left. right: The element floats to the right.

1. A brief introduction to floating properties in CSS

Introduction : Without the intervention of CSS, the block-level elements occupy one line. The width and height can be set, and the in-line elements are displayed side by side, and the width and height are automatically filled. The standard document flow (default layout) of an HTML page is: from top to bottom, from left to right, with line breaks when encountering blocks (block-level elements).

2. CSS float floating property

Introduction: This article mainly introduces the float attribute: defining the direction in which the element floats.

3. After setting the float attribute to li, the outer ul cannot be opened.

I have encountered this problem several times recently in the project. I feel that it is caused by floating. Although I used

It was solved, but I didn’t really understand it. I checked the relevant content on the Internet. It was because after setting the float for li, it broke away from the current normal document flow. , so there is no way to expand the height of the outer layer ul.

4. css float floating attribute usage methods and examples to explain

The float floating attribute of Css is used to set label objects (such as: < ;p> tag box, tag, tag, tag and other html tags) floating layout, floating is what we call the label object floating to the left (float:left) and floating Move to the right (float:right).

What does float mean? Float means floating, and it also means floating when translated into Chinese. Go to the float manual in the corresponding css manual to learn about the basic information about float.

The role of float: Define float (floating) through CSS to let the p style layer block float to the left or right (lean).

5. Summary of how to use clear both to clear floats in CSS

In our daily web page development, each page has many p layouts, then When we were developing, we knew that using css float would produce css float. After each float, one thing we have to do is to clear the float. To do this, we have to use the clear style attribute. Today we will give it to you Introducing a summary of the use of clear both to clear floats!

6. Share an optimization plan for clearing floats

clearfix hack is a well-known method for clearing floats without using additional tags. This article provides Come up with an optimization solution that can further reduce the amount of CSS required.

Related questions and answers:

1. javascript - Questions about using overflow: hidden to clear floats

2. java - android floating box problem

[Related recommendations]

##1.

jQuery implements intelligent floating positioning when the page is scrolled

2.

Simple implementation of js floating box

3.

Summary of how to use clear both to clear floating boxes in CSS

The above is the detailed content of Summary of definition and usage of floating attribute functions. For more information, please follow other related articles on the PHP Chinese website!