float (floating) related tips in CSS _ Experience Exchange

The float (float) concept may be the most confusing concept in CSS. Float is often misunderstood, and is criticized for readability, usability issues caused by full-floating context 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're serious about reading the floating concept, you'll find it's not as complex as you see it. Most of the problems are due to the old version of IE (I just guess). If you know these bugs, you can avoid these problems.

Let's try to solve these problems and clarify some of the misconceptions that used to be floating. We have taken a look at the relevant articles of the dozen and selected some of the most important questions you must know.

What's should Know about floats
------------------------------------------------------------------------------------------------------------

"The practice of drawing around pictures can be traced back to a long, long time ago. This is why the feature was introduced into the browser from Netscape1.1, and why CSS uses floating properties to implement it. The term ' float ' refers to the ' additions to HTML 2.0 ' document that accompanies Netscape1.1, which describes how an element floats to one side and stops. ”

The positioning of the floating element is also based on the normal document flow, which is then drawn from the document stream and moved as far as possible to the left or right. The text content surrounds the floating element. When an element is extracted from the normal document stream, the other elements still in the document flow will ignore the element and fill his original space. ”

"The element will automatically become a block-level element after it floats. The element can be moved to the left or right of the current line. The properties are as follows: Float:left, float:right or Float:none "

"You should set the Width property for all floating elements (except for the element because it has an implied width). If you do not set the width, the result will be unpredictable. ”

For example, a floating element should define a width property, whether explicitly specified or implied. In addition, it fills the container elements as horizontally as possible, just like non-floating content, without giving other content space around them. Second, unlike elements in a normal document flow, the vertical margin (margin) of a floating element is not superimposed. Finally, floating elements can overlap with block-level elements that are adjacent to the normal flow of documents: floating elements do not account for any normal flow of documents, so it is not advisable to understand them as overlapping, but rather the concept of floating. ）。 ”

"The first thing to keep in mind is that floating elements can only float to the left or right, without floating to the middle, which is a lot easier for beginners. Remember, the most basic rule, floating elements can only float to the sides. ”

"When we let an element float, it floats to the right or to the left until it encounters the edge of the container. If we float another element in the same direction, it floats until it touches the edge of the previous floating element. If we float more elements, they will be arranged one by one, but soon there will be insufficient space, and when the row is already unable to accommodate more floating elements, then the next floating element will continue to arrange the newline. ”

containing blocks or containing boxes: "A container element refers to a row-level or block-level element that contains other child elements .... ”

"When explicitly specified, the vertical position of the floating element is determined by its position in the document flow, and the top is to 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 (padding) of the container element. The inline elements of your peers are arranged around floating elements. ”

"Because floating elements do not occupy normal document flow space, block-level elements before and after floating elements that do not explicitly specify positions occupy the position that the floating element should have been in, as if it had never existed." The line that follows the floating element narrows the width according to the floating element. elements that precede the floating element are rearranged to occupy a separate line. (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, a line down until there is a row that can hold the element." ”

"Any floating element cannot exceed the upper boundary where the original document is left. The top of the floating element must be aligned with the top of the current row (or aligned with the bottom edge of the previous block level element when there is no current line element). ”

"To really understand the floating theory, you have to understand what is the line in CSS. Unfortunately, in order to explain what a line is, you must first understand what a row-level element is. Row-level elements refer to non-block-level elements, such as <em> and the row is a logical concept, a virtual rectangle that contains all the row-level elements that make up the row, at least as high as the highest of those row-level elements. ”

"If we add all the columns in the DIV to the float:left, they will be left-to-right, and if we want a footer at the bottom of the page, we don't need a longest column, just add Clear:both."

"The potential disadvantage of using floating elements with floating elements such as layout is that whether or not your page will consistently show the effect depends on whether the browser implementation is consistent. Especially when floating elements are part of a more complex layout, they become even more vulnerable. ”

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

The element after the floating element automatically surrounds the floating element. If you do not want this, you can apply the ' clear ' property for these elements. There are 4 values for this property: Clear:left, Clear:right, Clear:both or Clear:none "

There are a number of tricks that can be done to clean up floating elements, but without introducing additional non-semantic tags. The following 3 are common practices: a) using the container element floating B) on the container element using Overflow:hidden C): After such a CSS pseudo-class.

"Inserting a cleanup element is a standard practice for the container to wrap all the floating elements properly, so that it has the effect of dragging the bottom edge of the container to wrap the elements contained in it." ”

"A common problem with floating design-based layouts is that the container for floating elements does not automatically stretch to include floating elements. If you want to add a border outside all the floating elements (for example, add a border to the container element), you must display the command browser to extend the container. You can use the overflow method. ”

Use: After imagine 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 in the bottom of the container, so we have to set {height:0;} and {Visibility:hidden;} to ensure perfectly.

