CSS Float and related layout modes

Float value

Look at a chestnut

The red wireframe represents the parent element

Out of the flow of the document is not completely detached, it will be blocked by the boundary of the parent element.

Float elements in the same document flow

Look at a chestnut:

The red box represents the parent element

After three child elements "float to the left", the parent element has no content, so the parent element has no height.

float element semi-detached document flow

On the element, out of the document flow, on the content, in the document flow. elements overlap, but the content does not overlap.

Give me a chestnut:

    
 
      float element semi-detached document flow    Float:left A float is a box, that's shifted to the left or right, the most interesting characteristi C of a float (o "floated" O "floating" box) is, content may flow along its side (or be prohibited from doing so by the ' Clear ' property).

One more chestnut:

    
 
      Float Abscure                    Float:left;        The 12th session of ChinaJoy Animation games exhibition July 31 at the opening of the Shanghai New International Expo Center, export is the platform performance of the handsome.                    some of the players to attract popularity, but also invited the famous actors, models come to help. Here are a bunch of beautiful show girl Live Photos.    

Usually we don't want this result, but the pink div is only surrounded by the first block of text. You need to use the Clear property

Clear

To understand clear, the first thing to know is that Div is a block-level element, with a single line in the page and a top-down arrangement, the legendary flow

① is applied to subsequent elements to clear the effect of floating on subsequent effects.

② applied to block-level elements

How to use:

Add a blank element (less used)

Clearfix, this is the general general scheme. Instead, use an unavailable point number to clear the float.

Give me a chestnut:

    
 
      Float Abscure                    Float:left;        The 12th session of ChinaJoy Animation games exhibition July 31 at the opening of the Shanghai New International Expo Center, export is the platform performance of the handsome.                    some of the players to attract popularity, but also invited the famous actors, models come to help. Here are a bunch of beautiful show girl Live Photos.    

