CSS Learning Summary-floating and clearing floats

float float
The Float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of the Web page, although it remains partially liquid (as opposed to absolute positioning).

A floating element is a value of float that is not the element of none.

/* Keyword values */
Float:left;
Float:right;
Float:none;
Float:inline-start;
Float:inline-end;

/* Global values */
Float:inherit;
float:initial;
Float:unset;
Because float means using a block layout, it modifies the computed value of the display value in some cases:

Specify value calculation value
Inlineblock
Inline-blockblock
Inline-tabletable
Table-rowblock
Table-row-groupblock
Table-columnblock
Table-column-groupblock
Table-cellblock
Table-captionblock
Table-header-groupblock
Table-footer-groupblock
Flexflex, but float has no effect on such elements.
Inline-flexinline-flex, but float has no effect on such elements.
Otherunchanged
Note: If you want to manipulate the float property as a member of the Element.style object in JavaScript, you must write Cssfloat in Firefox 34 and older versions. Also note that in Internet Explorer 8 and older IE, use the Stylefloat property. This is a special case of the hyphen-delimited nomenclature used by Dom hump naming and CSS (this is because "float" in JavaScript is a reserved word, because the same reason, "class" is changed to "ClassName", "for" is changed to " Htmlfor ").

Grammar
The value of the float property is specified as a single keyword, and the value is selected from the list of values below.

Value

Left

A keyword that indicates that the element must float to the left of the Block container on which it resides.

Right

Indicates that the element must float to the right of the Block container on which it resides.

None

A keyword that indicates that the element does not float.

Inline-start

Keyword that indicates that the element must float on the beginning of its block container, the left side of the ltr script, and the right side in the RTL script.

Inline-end

Keyword that indicates that the element must float to the end of its block container, to the right in the Ltr script, and to the left in the RTL script.

Formal syntax

Left | Right | none | Inline-start | Inline-end

Example

<style type= "Text/css" >
div {border:solid red; max-width:70ex;}
h4 {float:left; margin:0;}
</style>

<div>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>

How the floating element is positioned
As we mentioned earlier, when an element floats, it is moved out of the normal flow of the document and then panned left or right, until it touches the bounding box of the container, or touches another floating element.

In the picture below, there are three red squares. There are two of them floating to the left and one floating to the right. Notice that the second left-floating square is placed to the right of the first left-floating square. If there are more squares floating like this, they will continue to stack to the right until the container is filled with an entire line, and then wrap to the next line.

Clear floating
In the previous example, the height of the floating element is smaller than the height of the container element (which is the block element) in which they reside. However, if the text inside the block element is too short to support the size of the block element to a height greater than the height of all the floating elements, we may see unexpected effects. For example, if the text in the picture above is only "Lorem ipsum dolor sit amet," and next is another heading element with the same style as the "floats Example" heading, then the second heading element appears between the red squares. In most of these cases, however, we want the title element to be left-aligned. In order to achieve this effect, we need to clear the float.

In this example, the simplest way to clear the float is to add a clear property to the new heading element that we want to ensure left-aligned:

h2.secondheading {Clear:both;}
However, this method is only valid when there are no other elements in the same level formatting context (block formatting context). If our H2 has a sibling element that floats to the left and floats to the right, then using clear will cause the heading element to appear below the sidebar, which is obviously not the result we expect.

If you cannot use clear float, another practice is to limit the block-level formatting context of a floating container. Again, the example above has three red squares and a P element. We can set the value of the P element's overflow property to hidden or auto, because it allows the container element to stretch to include a red square, rather than letting them go beyond the bottom of the block element.

p.withredboxes {overflow:hidden; height:auto;}
Note: setting overflow to scroll also allows the block element to be large to contain all the floating child elements, but this will show a scroll bar regardless of the content. Even if the height default is auto, we set it to indicate that the container should increase its height to wrap the contents inside.

Clear clears floating
The Clear CSS property specifies whether an element can be next to a floating element before it, or it must move down (clear float) below it. The clear property applies to floating and non-floating elements.

Clear:none;
Clear:left;
Clear:right;
Clear:both;
Clear:inline-start;
Clear:inline-end;

Clear:inherit;
When applied to a non-floating block, it moves the bounding border of the non-floating block below the outer bounds of all relevant floating elements. This behavior can cause margin collapsing to not work.

When applied to a floating element, it moves the outer bounds of the element below the outer bounds of all relevant floating elements. This affects the layout of the subsequent floating elements, which cannot be positioned above the elements that precede it.

The relevant floating element to be cleared refers to the front float in the same block-level formatting context.

Note: If you want an element to include all the floating elements, you can either set the container to float or use the: after pseudo-element to set the clear property as an alternative.

/* Best practical*/
/* Old */
. Clearfix:before,. clearfix:after{
Overflow:hidden;
display:table;
Visibility:hidden;
Content: ";
Clear:both;
}

/* NEW */
. Clearfix::before,. clearfix::after{
Overflow:hidden;
display:table;
Visibility:hidden;
Content: ";
Clear:both;
}

/* New Clearfix */
. clearfix::after {
Content: "";
display:table;
Clear:both;
Overflow:hidden;
Visibility:hidden;
}

/* Old Clearfix */
. clearfix:after {
Content: "";
Display:block;
Clear:both;
}
Grammar
Clear:none
Clear:left
Clear:right
Clear:both

Clear:inherit
Value

None

The element does not move down until the float is cleared.

Left

The element is moved down to clear the previous left float.

Right

The element is moved downward to clear the right float before.

Both

The element is moved downward to clear the left and right floats before.

Inline-start

Inline-start is a keyword that indicates that the element moves down to clear the float on the start side of its containing block. Floating or right floating on the left side of an area.

Inline-end

Inline-end is a keyword that indicates that the element moves down to clear the float at the end of its containing block, ' either floating on the right side of an area or floating on the left.

Example
Note: Add the ' wrapper ' class to the div so that it adds a border to better observe that this property of the entity is cleared.

HTML Content

<div class= "wrapper" >

<p class= "Black" >lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus sit amet diam. Duis mattis varius DUI. Suspendisse eget dolor.</p>

<p class= "Red" >lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p class= "Left" >this paragraph clears left.</p>

</div>
CSS Content

. wrapper{
BORDER:1PX solid black;
padding:10px;
}
. Left {
BORDER:1PX solid black;
Clear:left;
}
. Black {
Float:left;
margin:0;
Background-color:black;
Color: #fff;
width:20%;
}
. Red {
Float:left;
margin:0;
background-color:red;
width:20%;
}
p {
width:50%;
}

If in the example above, the Float:left in the style is changed to Float:right, the corresponding clear:right.
And if the left float and the right float all have the style, then Clear:both. (both: both)

BFC Block Format context
Block formatting CONTEXT,BFC is part of the visual CSS rendering of Web pages, the area in which block-level boxes are generated during layout, and also the area of interaction between floating elements and other elements.

The following methods create a block formatting context:

The root element or the element that contains the root element.

Floating element (the float value of the element is not none).

An absolutely positioned element (the position of an element (the position attribute is used to specify how an element is positioned in the document.) The Top,right,bottom and left properties determine the final position of the element. ) is absolute (absolute positioning) or fixed (stationary positioning).

Inline block Element (the display of the element is inline-block.

Table cell (the display of the element is table-cell,html table cell Ipalogama This value is considered)

Table title (The display of the element is the Table-caption,html table header defaults to that value)

Anonymous table cell elements (the display of the element is table, ' Table-row, Table-row-group, ' Table-header-group, ' table-footer-group (HTML table, Default properties of row, Tbody, THEAD, TFOOT) or inline-table)

The overflow value is not a visible block element.

The display value is an element of flow-root.

The contain value is an element of layout, content, or strict.

Elastic element (display is a direct child of flex or Inline-flex Element)

Grid element (display is a direct child of a grid or inline-grid element)

Multi-column container (the Column-count or column-width of the element is not auto, including ' Column-count ' is 1)

The Column-span element for all always creates a new BFC, even if the element is not wrapped in a multi-column container (standard change, Chrome bug).

All content in the element that created the block formatting context is included in the BFC.

The block formatting context is important for floating positioning and clearing floats. Floating positioning and clearing floats are applied only to elements within the same BFC. Floating does not affect the layout of elements in other BFC, and clearing floats only clears the float of the elements in front of it in the same BFC. Margin folding (margin collapsing) also occurs only between block-level elements that belong to the same BFC.

The following is not an excerpt from the MDN, but instead a blog post from Pony & in the blogosphere, which is then collated and added to your own ideas.

Inline and block-level elements
Level element
Inline element A,b,strong,span,img,label,button,input,select,textarea
Block-level element header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer
tags are divided into inline and block-level elements
The difference between the two and characteristics:
Inline elements can coexist with other inline elements in one row, while block-level elements are exclusive to one row;
The inline element setting width is invalid, the height is invalid (you can set Line-height), and the margin and padding settings in the upper and lower directions are invalid;
Inline elements are suitable for displaying specific content, while block-level elements are suitable for layout;
Inline elements are generally containers of content, while block-level elements are generally containers of other containers;
Inline elements are converted to block-level elements, using Display:block
Block-level elements into inline elements, using display:inline
Standard document flow and out-of-standard flow
The creation of Web pages is like a "stream", from top to bottom, like a "knit sweater".
Microscopic phenomenon of standard document flow:

Blank folding Phenomenon
Multiple spaces are merged into a single space to display in the browser page.
Height is not homogeneous, the bottom is aligned
The text and the size of the picture, will make our page elements appear tall and uneven phenomenon, but in the browser view our page always find the bottom line alignment.
Wrap, line write, line write
If you write text in one line and there is too much text, the browser will automatically wrap it to show our text.
There are a lot of restrictions in the standard flow, which makes it impossible to achieve many page effects. What if we're going to side----and we're going to set the width high? The way is: immigration! Out of standard flow!

There are three ways to get an element out of the standard document flow in CSS:

(1) Floating
(2) Absolute positioning
(3) Fixed positioning
Summarize
Four characteristics of floating
Floating element off-label
Escape from the standard flow, float, cover the elements of the standard shed
Floating elements Snap to each other
There's not enough room to snap at each other, lean towards the side
Floating elements have "word circumference" (text around) effect
The so-called word circumference effect, when the div floats, p does not float, Div covers the p,div of the level of improvement, but the text will not be covered in the p, at this time to form a word surround effect.
Floating element Compact effect (shrink)
A floating element. If width is not set, it is automatically shrunk to the width of the text (this is similar to the inline element)
The principle of layout floating
According to the layout, it is generally not a box floating alone, often in the horizontal area of the box floating together. And in order to not affect the next document standard flow, often also have to close to make clear float.

Why do you want to clear float?
In the layout of the page, the height of the parent element in each structure is not normally set. Why ）

Just think, if I finished the first version of the page, feel very cool, suddenly separated for one months, the product manager said the page of a piece of the area, need to add content, or think the picture to narrow down. Such requirements are very common in the work. I really want to hit him. So at this time as a front-end small white, must be to go to each place add content, change the picture, and then modify the height of the parent box. That's the problem, doesn't it affect development efficiency? The answer is yes.

So the parent box we generally do not set the height, and the child element of the content to prop up the height of the parent box. So when this child element is floating, the parent box does not have height, the floating child element is not filled with the height of the parent box, this time there will be a box next to the floating sub-element is covered in the block, very affected page layout.

Floating elements can actually achieve the side effect of our page elements, which is its benefit, but at the same time it also brings the page layout of great confusion!!! So we're going to do one more move after the float is cleared (it does not affect the layout before the floating child element, just for the layout of the next row is not messy.) ）

How to clear floating
Set the height of the parent box (not recommended, unless the perpetual navigation bar is the same)
Clear:both (both left and right floating can be cleared)
Add an empty div to the back of the floating element, and the element does not float, then set the Clear:both
Also known as the inner wall method, added div element for no reason, structure redundancy
Pseudo element Purge method (common)
To the parent box of the floating child element, which is the non-floating element, add a Clearfix class, and then set.

. clearfix:after{
/* To write these three words to achieve * *
Content: '. ';
Clear:both;
Display:block;
}
Overflow:hidden (commonly recommended)
Overflow:auto can also clear the float, but auto will appear scroll bar, so still use the hidden without affecting the layout, it is recommended to use this method, basically with the help of BFC (block format context) implementation.
Value Description
Visible default value. The content is not trimmed and is rendered outside the element box.
Hidden content is trimmed, and the rest is not visible.
Scroll content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.
Inherit specifies that the value of the overflow property should be inherited from the parent element.
Gradually evolved into a overflow:hidden purge method. It's actually a BFC area.

BFC Common role
Contains floating elements to resolve height collapse and clear float;
Not covered by floating elements (such as text around the effect);
Prevent margin collapse (margin collapse)
In the standard document flow, the margin in the vertical direction between block-level labels will be large, which is the collapse of margin. Can be solved by Overflow:hidden to produce BFC.
End

CSS Learning Summary-floating and clearing floats