Articles on Float (Float) Related Techniques in CSS

Float is perhaps the most confusing concept in CSS. Float is often misunderstood, and the readability and availability problems caused by the floating of all context elements are highly blamed. However, the root cause of these problems is not the theory itself, but the interpretation of the theory by developers and browsers.

If you carefully read the floating concept, you will find that it is not as complicated as you have seen. Most problems are caused by older versions of IE (I just guess ). If you know these bugs, you can avoid them.

Let's try to solve these problems and clarify some misunderstandings about the previous usage of floating. We have referred to the related articles and selected the most important questions you must understand.

What You shoshould Know About Floats
Bytes ------------------------------------------------------------------------------------------------------------

"The practices on image and text can be traced back to a long time ago. This is why Netscape1.1 is introduced into the browser and why CSS uses floating attributes to implement it. The term 'float (floating) 'references the 'additions to HTML 2.0' document released along with Netscape1.1 to describe how an element floats to one side and stops ."

"The positioning of floating elements is still based on the normal Document Stream, and then extract from the document stream and move it as far as possible to the left or right side. The text content is surrounded by floating elements. When an element is extracted from a normal Document Stream, other elements in the Document Stream will ignore this element and fill in its original space ."

"After an element floats, it is automatically converted into a block-level element. This element can be moved to the left or right of the current row. Attributes: float: left, float: right or float: none"

"You should set the width attribute for all floating elements (unless it is an element because it has an implicit width ). If the width is not set, the result is unpredictable ."

"For example, a floating element should define the width attribute, whether explicitly specified or implicitly. In addition, it fills container elements horizontally as much as possible, just like non-floating content, without leaving other content spaces around them. Second, unlike the elements in a normal Document Stream, the vertical margin (margin) of floating elements is not superimposed. Finally, floating elements can overlap block-level elements in a normal document stream, but the concept of floating .)."

"The first thing we should keep in mind is that the floating element can only float to the left or right side, but does not float to the middle. This is a common mistake for many new users. Remember, the most basic rule is that floating elements can only float to both sides ."

"When we let an element float, it will float to the right or left until it encounters the container edge. If we move another element in the same direction, it will float until it hits the edge of the previous floating element. If we float more elements, they will arrange one by one, but the space will soon be insufficient. When this row cannot accommodate more floating elements, the next floating element will continue to be arranged with line breaks."

Containing blocks or containing boxes: "A container element is a row-level or block-level element that contains other sub-elements ...."

"When it is clearly specified, the vertical position of the floating element is determined by its original position in the Document Stream, And it is directed at the top of the current row. But horizontally, it moves as far as possible to the edge of the container element, but still follows the padding distance of the container element ). Elements in the same row are arranged around floating elements ."

"Because floating elements do not occupy the normal file stream space, block-level elements that are not explicitly specified before and after floating elements occupy the position where the floating elements are supposed to be, it's like it never exists. The rows after the floating element narrow down the width according to the floating element. Elements before floating elements are arranged again, occupying an independent row. In this case, the performance of ie and ff is different )"

"If there is not enough space in the horizontal direction of the current row to accommodate floating elements, the next row is displayed until there are rows that can accommodate this element ."

"No floating element can exceed the upper boundary of the original location of the document. The top of the floating element must be aligned with the top of the current row (or in the absence of the current row element and the bottom edge of the previous block-level element )."

"To really understand the floating theory, you must understand what is a line box in CSS ). Unfortunately, to explain what a row is, you must first understand what a row-level element is. Row-level elements refer to non-block-level elements. For example, <em> while a row is a logical concept, it is a virtual rectangle that contains all row-level elements that make up the row, the height is at least the highest of these row-level elements."

"If we add float: left to all the columns in the Div, they will be arranged to the left. If we want to have a footer at the bottom of the page, we don't need the longest column, as long as we add clear: both is enough"

"There is a potential disadvantage in the layout of floating elements, such as floating elements, that is, whether your page can be consistently displayed depends on whether the browser is consistent. Especially when floating elements are part of a more complex layout, they will become more vulnerable ."

Clearing the floats
Bytes ------------------------------------------------------------------------------------------------------------

"The elements after the floating element automatically surround the floating element. If you do not want this, you can apply the 'clear' attribute to these elements. This attribute has four values: clear: left, clear: right, clear: both or clear: none"

There are many tips to clear floating elements, but no additional silent labels are introduced. The following are three common practices: a) floating container elements together B) using overflow: hidden c on container elements) using css pseudo classes such as after.

"Inserting a cleanup element is a standard practice that enables the container to correctly wrap all floating elements, which has the effect of dragging the edge at the bottom of the container to wrap the contained elements ."

"A common problem with floating design-based la s is that containers of floating elements do not automatically stretch to contain floating elements. If you want to add a border (for example, adding a border to the container element) to the outside of all floating elements, you must display the command browser to stretch the container. You can use the overflow method ."

Use: after to imagine that we use: after to insert a dot and set its property {clear: both ;}. This is all you need to do, but no one will accept that there is a gap at the bottom of the container, so we also need to set {height: 0 ;}and {visibility: hidden ;} to ensure tight seams.