Parsing of CSS floating float and positioning position

This article for CSS floating float, positioning position to learn to understand, through examples to help you master CSS floating float, positioning position skills, interested in small partners can refer to

One. float float

I. Definitions and Rules

float defaults to none, which corresponds to the condition of the standard stream. When Float:left, the element is tightened to the left of its parent element, out of the standard flow, and the width is no longer stretched to fill the parent container, but is determined by its own content.

Ii. Presentation rules

Prepare the Code

1, the middle to #father plus position:absolute, is to eliminate the margin-top transmission problem, the relevant content is as follows

Solution to the problem of margin-top transfer in nested p

In both browsers, there are two nested relations p, if the parent element of the outer p padding value is 0, then the value of Margin-top or margin-bottom of the inner layer p will be "shifted" to the outer p.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  
Reason: The box did not get haslayout caused margin-top invalid

Workaround:
1, in the parent layer P Plus: overflow:hidden;
2, the outer margin of the margin-top is changed into the padding-top inner margin;
3. The parent element produces a margin overlapping edge with a border that is not 0 padding or width is not 0 and style is not a none.
Parent Layer P Plus: padding-top:1px;
4, let the parent element generate a block formating context, the following properties can be implemented
* Float:left/right
* Position:absolute
* Display:inline-block/table-cell (or other table type)
* Overflow:hidden/auto
Parent Layer P Plus: position:absolute;

The display effect is


2. When the float is left right,


Visible from standard flow, standard flow in the Son3 when they do not exist, so son3 instead of the original Son1 position, and Son1 left border, son2 right border and son3 around border coincident

3. When the all-in-all float is left


The text revolves around the p of float.

4, the left floating, 3 right floating, when the window width is reduced, 3 will be squeezed down


When 3 left floats and 2 right floats, it is displayed as


When the width of the browser window is reduced, guess who will be squeezed down, son2?


The answer is still son3, the rule is: write in the HTML file will be squeezed down, in the HTML file, Son3 behind the son2, so always son3 first squeeze down.

5, increase son1 height, Son3 will be stuck there when squeezed down


6, delete the text in the box, 3 sub p all left floating
Displayed as


The three sub p in the parent p are all out of the standard stream, and the parent p is shrunk to a line, which can be corrected with clear
Plus a margin-padding-border all for 0,clear for the both of the empty P, to support the big Father P


Iii. Clear clears floating
If there are float:left elements, he will affect the following elements, such as p in the above example, write clear:left in the P element to eliminate the effect of the previous left floating element on this element. The same clear:both is cleared around.

Two. Positioning position

Position value has static absolute relative fixed

1. Static
This is the default, that is, the standard flow down, is the static positioning method.

2. Fixed
Fixed in browser window, what forum [back to top] This button is fixed
Practice doing a go back to the top of the play

<p id= "BackToTop" >       back to top   </p>   #backToTop   {       width:100px;       height:50px;           background-color:red;       Color:white;       Cursor:pointer;       border-radius:25px 0 0 25px;       padding-left:20px;           Text-align:center;       line-height:50px;         position:fixed;       bottombottom:80px;       rightright:0;   }
Show effect


3. Relative relative positioning

Offsets relative to itself, and does not deviate from the standard flow, using Top/bottom left/right to specify offsets

4. Absolute absolute Positioning

Apply absolute rule's off-standard flow based on other positioned elements

1), this other element:
The closest positioned ancestor element or browser window that is located in the browser window when no previous ancestor element is found.
2), has been positioned: refers to position has been set, and is not static ... That is, the position value is not static is the element that is already positioned, position is not set or set to static that it is not positioned.
Trick

By setting the Position:absolute only, without setting the Top/bottom/left/right value, the element remains in place, but it is out of the standard stream.

Three. Display

Display value has inline block none

Set to None to hide it, such as new additions such as Inline-block

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!