Technical articles related to Float in CSS_Experience exchange

The concept of Float is perhaps the most confusing concept in CSS. Float is often misunderstood and criticized for readability and usability issues caused by floating all contextual elements. However, the root cause of these problems is not the theory itself, but the interpretation of the theory by developers and browsers.

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

Let’s try to address these issues and clear up some previous misunderstandings about using floats. We've consulted dozens of relevant articles and selected the most important ones you need to know.

What You Should Know About Floats
---------------------------------- -------------------------------------------------- -----------------------

"The practice of surrounding graphics and text goes back a long, long time. That's why from Netscape1. 1 began when this feature was introduced to browsers, and why CSS used the float attribute to implement it. The term 'Float' is referenced from the 'Additions to HTML 2.0' document released with Netscape 1.1, describing an element that floats to an "The positioning of the floating element is still based on the normal document flow, and then extracted from the document flow and moved as far as possible to the left or right side. The text content will Around floated elements. When an element is extracted from the normal document flow, other elements still in the document flow will ignore the element and fill its original space."

"The element will automatically rotate after it is floated. is a block-level element. This element can be moved to the left or right of the current row. The attributes are as follows: float: left, float: right or float: none”

　“You should set the Defined width attribute (unless it is an element, which has an implicit width). If the width is not set, the results will be unpredictable."

"For example, floated elements should have a defined width properties, whether explicitly specified or implicit. In addition, it fills container elements as horizontally as possible, just like non-floated content, leaving no room for other content to surround them. Second, and in normal document flow Different elements, the vertical margins of floating elements will not overlap. Finally, floating elements can overlap adjacent block-level elements in the normal document flow (Annotation: Floating elements do not occupy any normal document flow space, so it is recommended not to be understood as Overlapping, but the concept of floating in the air.)."

"The first thing we need to keep in mind is that floating elements can only float to the left or right, and there is no such thing as floating to the middle. This is Many novices make mistakes easily. 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 meets The edge of the container.If we float another element in the same direction, it will float until it hits the edge of the previously floated element. If we float more elements, they will be arranged one by one, but soon there will be insufficient space. When the row can no longer accommodate more floating elements, the next floating element will wrap to another row and continue to be arranged. "

Containing blocks or containing boxes: "Container elements refer to row-level or block-level elements that contain other child elements. . . . " 　　　　　　 "When explicitly specified, the vertical position of a floated element is determined by its original position in the document flow, with the top aligned with the top of the current line. But horizontally, it moves as far as possible toward the edge of the container element, but still follows the padding of the container element. Inline elements of the same row are arranged around the floated element. ”

“Since floated elements do not occupy normal document flow space, block-level elements whose positions are not explicitly specified before and after the floated element will occupy the position where the floated element should be, as if it had never existed. The line after the floated element will shrink in width based on the floated element. The elements before the floated element will be rearranged and occupy a separate row. (Annotation: ie and ff behave differently in this case)"

"If there is not enough space in the horizontal direction of the current row to accommodate the floating element, go down the next row until there is space that can accommodate the floating element. The row of elements. "

"No floating element can exceed the upper boundary of the original document location. The top of a floated element must be aligned with the top of the current row (or the bottom edge of the previous block-level element if there is no current row element). ”

“To truly understand float theory, you must understand what a line box is in CSS. Unfortunately, in order to explain what a row is, you must first understand what a row-level element is. Row-level elements refer to those non-block-level elements, such as . Row is a logical concept. It is a virtual rectangle that contains all row-level elements that make up the row. Its height is at least equal to these row-level elements. The tallest one. "

"If we add float: left to all the columns in the Div, they will be arranged one by one 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 Just add clear: both"

"Using floating elements to contain floating elements has a potential disadvantage, that is, whether your page can always maintain a consistent presentation will depend on the browser. Whether the implementation remains consistent. Especially if the floated element is part of a more complex layout, it will become even more vulnerable. ”

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

"The elements after the floated element will automatically surround the floated element. If you don't want this, you can apply the 'clear' attribute to these elements.This attribute has 4 settings: clear: left, clear: right, clear: both or clear: none”

There are many techniques to clean floating elements without introducing additional unsemantic tags. Below 3 methods are more common: a) Float container elements together b) Use overflow: hidden on container elements c) Use css pseudo-classes such as: after.

"Inserting a cleanup element is to make the container Standard practice for correctly wrapping all floated elements, doing so has the effect of 'dragging' the bottom edge of the container to wrap the contained element. "

"For layouts based on float design, a common problem is that the container of the floated element does not automatically expand to contain the floated element. If you wish to add a border around all floated elements (for example, a border around a container element), you must explicitly command the browser to stretch the container. You can use the overflow method. ”

Using:after Imagine we use :after to insert a period and set its property {clear: both;}. That’s all you need to do, but no one will accept the bottom of the container There is a slight gap, so we also need to set {height: 0;} and {visibility: hidden;} to ensure a perfect fit.