CSS4 Layout Skills-float

There are four common layout techniques I know, the original three (1.float layout 2.position layout 3.table layout) and now CSS3 new Flex layout. Each of the four layouts has advantages and disadvantages

Block vs. inline properties Comparison

• Display:block

1. The block element will have a single row, and multiple block elements will have their own new row. By default, the block element width automatically fills the width of its parent element.
2. The block element can set the Width,height property. Block-level elements, even if they are set to a width, are still exclusive rows.
3. The block element can set the margin and padding properties.

• Display:inline

2. The inline element does not have a single row, and multiple adjacent inline elements are arranged in the same row until one line is not arranged before a new line is changed, and its width varies with the contents of the element.
3. The inline element setting width,height property is invalid.
4. The margin and padding properties of the inline element, horizontal padding-left, Padding-right, Margin-left, and margin-right all produce margin effects, but the vertical direction of the padding-top, Padding-bottom, Margin-top, Margin-bottom does not produce a margin effect.

• Display:inline-block

1. In simple terms, the object is rendered as an inline object, but the object's contents are rendered as a block object. Subsequent inline objects are arranged in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both block width height characteristics and inline peer characteristics

Float Property

1. Floating elements are removed from the normal flow of the document in some way, and other elements wrap around the element

The elements of the 2.float attribute automatically generate block-level boxes, which are handled according to block-level elements, and display:block can also be used, but with no specific meaning

3. Rules for floating elements:

• The margins for floating elements are not merged (not the same as table, as explained below)
• The floating element cannot exceed the left and right edges of its containing block
• The left and right boundaries of a floating element must be a floating element boundary that appears before the document, unless it is directly above or directly below
• The floating element must appear lower than the first floating element
• Floating out of the containing block, another line

Explanation of the above rules

Put a piece of HTML code like this

1<Divstyle= "Border:solid 5px #333; width:300px;">2 3<DivID= "RedBox"style= "height:100px; width:100px; background-color:red; ">4</Div>5<DivID= "Greenbox"style= "height:100px; width:100px; background-color:green;">6</Div>7<DivID= "Yellowbox"style= "height:100px; width:100px; background-color:yellow;">8</Div>9</Div>

After changing Redbox to Float:left

Greenbox disappears, indicating that the floating element is first deducted from the parent element, forming a new layer, and then starting to float. For the original element will overwrite

However, after Greenbox added the text,

It looks like the text was added to the Yellowbox, because the text element is arranged around a floating element, which is "flow", and the greenbox height is only 100px, so it's squeezed out of his bottom boundary.

But if the height of the greenbox is not set, the Greenbox height attribute is removed,

Height as the text flow changes, will appear and line high Greenbox

This can happen if there is a lot of text in the parent element after Redbox.

This explains 1. The floating element is removed in some way from the normal flow of the document, and the other elements wrap around the element

And for 5 floating rules:

It can be understood that the CSS is processed every time to a floating element regardless of the element above the floating element, for such a piece of code

<Divstyle= "Border:solid 5px #333; width:300px;">  <P>Xxxxxxxxxxxxxxx</P>        <DivID= "RedBox"style= "height:100px; width:100px; Background-color:red;float:left">        </Div>        <DivID= "Greenbox"style= "height:100px; width:100px; background-color:green;">                </Div>        <DivID= "Yellowbox"style= "height:100px; width:100px; background-color:yellow;">        </Div>

    </ Div >

There's a phenomenon like this.

It is also declared that the float is the upper boundary of the floating element as the upper boundary of the current floating elements.

The floating block floats in one direction as much as possible, but cannot overwrite other floating elements, and another row is out of bounds

Look at the following section of code:

<Divstyle= "Border:solid 5px #333; width:300px;">        <DivID= "RedBox"style= "height:100px; width:100px; Background-color:red;float:left">        </Div>          <DivID= "Greenbox"style= "height:100px; width:100px; Background-color:green;float:left">                </Div>          <DivID= "Yellowbox"style= "height:100px; width:100px; background-color:yellow;">        </Div>    </Div>

If multiple floating blocks are included

<Divstyle= "Border:solid 5px #333; width:300px;">        <DivID= "RedBox"style= "height:100px; width:100px; Background-color:red;float:left">        </Div>          <DivID= "Greenbox"style= "height:100px; width:100px; Background-color:green;float:left">                </Div>   <DivID= "RedBox"style= "height:100px; width:100px; Background-color:red;float:left">        </Div>  <DivID= "Greenbox"style= "height:100px; width:100px; Background-color:green;float:left">                </Div>        <DivID= "Yellowbox"style= "height:100px; width:100px; background-color:yellow;">        </Div>    </Div>

At this point, the floating block runs to the outside of the parent element, because the floating block is equivalent to being keyed out from the parent element, so it does not occupy a position, so it goes beyond the bottom boundary.

About the parent element collapse of the relevant content, specifically, you can read this blog: http://blog.csdn.net/GoodShot/article/details/44348525

Clear Property

Clear:left | Right | both | none | Inherit

Clear:left Clear:right respectively is cleared left and right floating, Clear:both is cleared all, see the following example

<Divstyle= "Border:solid 5px #333; width:300px;">        <DivID= "RedBox"style= "height:100px; width:100px; Background-color:red;float:left">        </Div>          <DivID= "Greenbox"style= "height:120px; width:100px; background-color:green;float:right">                </Div>          <DivID= "Yellowbox"style= "height:100px; width:300px; background-color:yellow;">        </Div>    </Div>

Then give Yellowbox respectively set Clear:left,clear:right,clear:both;

Above is my understanding of floating

CSS4 Layout Skills-float