Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What is the reason why css clears the float?

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the reason why css clears and floats". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First of all, let's take a look at what does css float mean?

We can know from Baidu encyclopedia: float is a positioning attribute in css style, which is used to set the floating layout of tag objects (such as tag boxes, tags and other html tags). Floating is what we call tag objects floating on the left (float:left) and floating on the right (float:right).

In css, we float the element through the float attribute. (for more information on float attributes, please refer to the css manual)

The meaning of the above seems to be coming and going in the clouds and fog, so let's explain it in a popular way.

Be aware that some elements in css are block-level elements, and they automatically enable a new line (block-level elements reference article: what is the definition of css block-level elements? What are the css block-level elements? There is another inline element, the inline element, which remains on the same line as the previous content (inline elements reference article: what are the inline elements of css? The difference between css block-level elements and inline elements); but sometimes we need to change this layout, which requires the use of css floats.

Css floats allow a given element to move to one side of its line and other content to flow down. A right floating element will be pushed to the right side of its container, and the content will flow down along its left side, a floating element will be moved to the left, and the content will flow down along its right side.

After seeing what css floats mean, let's take a look at why css needs to clear floats.

Second, why does css clear floats?

After explaining what css floats mean above, we know that css floats must exist in some cases, so why clear floats?

We need to know that the floating box can move left and right until it encounters another floating box or the inclusion box on its outer edge. The floater does not belong to the normal flow in the document stream, and when the element floats, it does not affect the layout of block-level elements, only the layout of inline elements. At this point, the normal flow in the document stream behaves as if the floater does not have the same layout pattern. A "high collapse" occurs when the height of the containing box is less than that of the floating box. At this point, it is necessary to clear the float.

To put it simply:

For example, if the float is not cleared, there will be the problem of div overlap. You make a web page with a header block at the top, two columns of content blocks in the middle and a footer block at the bottom. When you set the left float in the middle content block, and the height of the two blocks is different, and one piece is higher, then you need to clear the float in footer. If you do not clear the float, the footer block will overlap with one of the contents.

This is the end of the content of "what is the reason why css clears the float". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report