Table of Contents
Reply to the discussion (solution)
Home Web Front-end HTML Tutorial What is the important role of floats in CSS_html/css_WEB-ITnose

What is the important role of floats in CSS_html/css_WEB-ITnose

Jun 24, 2016 pm 12:19 PM

What is the meaning and purpose of floats in CSS
Thank you all experts


Reply to the discussion (solution)

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

How do I use HTML5 form validation attributes to validate user input?

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

What is the purpose of the <iframe> tag? What are the security considerations when using it?

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

What is the purpose of the <meter> element?

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

What are the best practices for cross-browser compatibility in HTML5?

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

What is the purpose of the <datalist> element?

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

What is the purpose of the <progress> element?

See all articles