The floating model of the CSS layout model (how floating works and how to clear floating tricks?) ）

How the Float Works

Floating is to let an element out of the flow of the document, before and after the floating box and the non-positioning elements will be in the same way, it may flow vertically along its other side, but all make room for it, block-level elements are no exception (the floating element occupies a portion of the block-level elements of the line space, is still considered to occupy a It is just that part of the space occupied by the floating element cannot be used.

A floating box can be moved left or right until its outer edge touches the bounding rectangle of the containing box or another floating box, and if there is insufficient horizontal space on the current line, it moves down line by row until there is space (so the floating element does not affect the layout above the page). Any element can float, and a floating element generates a block-level box (with a block-level element attribute, but not an entire row), regardless of its own element.

In addition, because the floating element is out of the document flow, it cannot hold the height of the parent element in its document flow.

Clear floating tricks

1. Clear Remove floating

Left floating elements are not allowed on the left side.

Right floating elements are not allowed on the right.

both floating elements are not allowed on the left or right sides.

None The default value. Allows floating elements to appear on both sides.

in CSS1 and CSS2 , this is achieved by automatically increasing the upper margin for the purge element (that is , the element that has the clear attribute set). in CSS2.1 , the clearance space is increased above the outer margin of the element, and the margin itself does not change. No matter what kind of change, the end result is the same. For example, if the declaration is left cleared, the element's Sisu border boundary is just below the margin of the left floating element.

It is important to note that we do this by clearing the float on other elements to achieve a high Instead of floating elements. Floating elements out of the flow of the document, even if it has cleared space, it will not affect the height of the parent element, up to one side will not allow other floating elements.

Clear can only function with block-level elements or floating elements, but it has been said that the disadvantage of floating elements, so the general use of block-level elements.

full browser-generic clearfix scheme that uses pseudo-elements to clear floating "recommended"

Zoom was introduced to support IE6/7

join : Before to solve the problem of top margin folding in modern browser

. Clearfix:before,

. clearfix:after {

display:table;

Content: "";

}

. clearfix:after {

Clear:both;

}

. clearfix{

*zoom:1;

}

Alternatively, you can add a block-level element that specifically clears the float in the parent element. (Not recommended)

2, BFC clear floating

The BFC full name is the block formatting context, which is laid out according to the blocks-level box. We understand his features, triggering methods, and common usage scenarios that are enough.

The main characteristics of BFC

BFC The container is an isolated container, and the other elements do not interfere with each other; so we can trigger two elements. BFC to solve the vertical margin collapse problem.

BFC can contain floats; it is often used to solve the problem of the height collapse of floating parent elements.

among them, BFC Clear Float is the "include floating" feature.

So, how can we trigger Where's BFC ?

trigger mode of BFC

We can add the following properties to the parent element to trigger BFC:

float to be Left |

Overflow to be Hidden | auto | Scorll

Display to be Table-cell | table-caption | inline-block | flex | Inline-flex

position to be Absolute | fixed

Reference Documents: http://www.jianshu.com/p/09bd5873bed4

https://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-float

The floating model of the CSS layout model (how floating works and how to clear floating tricks?) ）