float in CSS (floating) Related tips article _ Experience Exchange

The float concept may be one of the most confusing concepts in CSS. Float is often misunderstood and is blamed for the readability and usability problems that result from the full floating of 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 concept of floating carefully, you will find that it is not as complicated as you see. 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 misconceptions that used to be floating. We refer to the related articles of the play and choose the most important questions you must understand.

What you Should Know about floats
------------------------------------------------------------------------------------------------------------

"The practice of graphics and text can be traced back to a long time ago." That's why the feature was introduced from Netscape1.1 and why CSS uses floating properties to implement it. The term ' float ' refers to a ' additions to HTML 2.0 ' document published with Netscape1.1 that describes how an element floats to one side and stops. ”

"The positioning of the floating element is based on the normal document flow and then pulled out of the document stream and moved as far as possible to the left or right. Text content is surrounded by floating elements. When an element is extracted from the normal document stream, other elements that are still in the document stream ignore the element and fill his original space. ”

"elements are automatically converted to block-level elements when they float." 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 (unless it is an 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, and does not give other content space to surround them as if they were not floating content. Second, the vertical margins (margin) of the floating element are not superimposed, unlike the elements in the normal document stream. Finally, floating elements can overlap with block-level elements in the normal document stream (the floating element does not account for any normal document flow space, so it is not recommended to be understood as overlapping, but as a floating concept.) ）。 ”

"The first thing we have to keep in mind is that floating elements can only float to the left or right side, not floating to the middle of a saying, this is a lot of novice easy to fan error." Keep in mind that the most basic rule is that floating elements can only float to both sides. ”

"When we let an element float, it floats right or 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 floated more elements, they would arrange one by one, but soon there would be insufficient space, and when the row could no longer accommodate more floating elements, the next floating element would be wrapped in line continuation. ”

containing blocks or containing boxes: "Container element is 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 original position in the document flow, the top of which is the top of the current line." 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 a peer are arranged around floating elements. ”

"Because floating elements do not occupy normal document flow space, block-level elements that are not explicitly specified before and after a floating element occupy the position where the floating element should have been, as if it had never existed." The line after the floating element narrows the width based on the floating element. elements that precede a floating element are rearranged to occupy a separate row. (IE and FF behave differently in this case) "

"If there is not enough space in the current row to accommodate the floating element, the line is down until there is a row that can hold the element." ”

"No floating element can exceed the upper bounds of the original document's location. The top of the floating element must be aligned to the top of the current line (or to the bottom edge of the previous block-level element when there is no current line element). ”

"To really understand floating theory, you have to understand what a line box is in CSS." Unfortunately, in order to explain what is a row, you must first understand what a row-level element is. Row-level elements are those that are not 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 tallest of these row-level elements. ”

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

"There is a potential downside to using a floating element to include a floating element, i.e. whether or not your page will remain consistent, depending on whether the browser's implementation is consistent." Especially when floating elements are part of a more complex layout, they will become 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 ' attribute to these elements. There are 4 sets of 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 without introducing additional, semantic-free tags. The following 3 kinds of practices are more common: A to float a container element (b) on a container element using Overflow:hidden C): After such a CSS pseudo class.

"Inserting a cleanup element is the standard practice of making the container properly wrap all the floating elements, which has the effect of dragging the bottom edge of the container to wrap the contained elements." ”

"A common problem with floating-design layouts is that the container for floating elements does not automatically stretch to include floating elements." If you want to add a border around all the floating elements (for example, by adding a border around 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 point number, and set its property {Clear:both;}. That's all you need to do, but no one will accept that there's a bit of space at the bottom of the container, so we're going to set {height:0} and {Visibility:hidden;} to make it fit.