Home >Web Front-end >HTML Tutorial >What is the important role of floats in CSS_html/css_WEB-ITnose
What is the meaning and purpose of floats in CSS
Thank you all experts
Please refer to
http:// www.w3school.com.cn/css/pr_class_float.asp
In order to understand the issue of floating, we must first understand the two states of html elements,
block elements, or inline elements.
1. Block elements have physical attributes and will occupy one line. Characteristics such as width and height can be set. Multiple block elements will be displayed in separate lines.
Representatives of block elements: div, p, etc.
2. Inline elements have no physical attributes and will not occupy a line. Multiple inline elements will be displayed side by side.
Representatives of inline elements: span , em, b, i, etc.
3. Sometimes the requirement is that you want certain elements to be displayed side by side and have settable physical properties. At this time, float is needed. Because HTML is a table structure, it is not responsible for the presentation level. At this time, a CSS attribute is needed to solve such a problem, and the float application was born.
The simple explanation is: it allows block elements to present the characteristics of inline elements to the outside and the characteristics of block elements to the inside.
Does this sentence mean the same as display:inline-block? In fact, it is like this. However, the compatibility of display:inline-block is not very good. There will be spacing under IE6, so float is used more often.
4. Float is not without its disadvantages. After float, it will have an impact on future sibling elements, so the css must be cleared before the sibling elements can be displayed normally.
Extended reading:
From: http://www.planabc.net/2007/03/11/display_inline-block/
Thank you very much for the wonderful answer!
Thanks!
Thank you very much for the wonderful answer!
Thanks!
You’re welcome, I’ll just leave it at that.
Easy to manage containers and classes
For example, on many websites, online customer service does this, floating in a fixed position on the website, making it convenient for users to use!
You can take a look at: http://www.bacysoft.cn/thread-76-1-1.html
Is it the effect you said?
Passing by to see the masters