CSS positioning (positioning) with float (floating)

First, CSS positioning (positioning)

1, positioning (positioning)

CSS positioning properties allow you to position a single element. It can also put an element behind another element and specify what should happen when the content of an element is too large. Elements can be positioned using the top, bottom, left, and right properties. However, these properties do not work unless the Position property is set first. They also have different ways of working, depending on the location method. There are four different positioning methods.

2. Static Positioning

The default value of the HTML element, that is, no positioning, and the element appears in the normal stream. Statically positioned elements are unaffected by top, bottom, left, and right.

3. Fixed positioning

The position of the element relative to the browser window is a fixed position. It does not move even if the window is scrolled:

<! DOCTYPE html>




Note: Fixed positioning needs to be described under IE7 and IE8! DOCTYPE to support it. Fixed positioning makes the position of an element independent of the document flow and therefore does not occupy space. Fixed positioned elements overlap with other elements.
4, Relative positioning
Relative positioning elements are positioned relative to their normal positions.
<! DOCTYPE html>



The content of the relative positioned elements that can be moved and the elements that overlap each other does not change the space it originally occupies.
<! DOCTYPE html>


Relative positioning elements are often used as container blocks for absolutely positioned elements.
5, Absolute positioning
The position of an absolutely positioned element is relative to the nearest positioned parent element, if the element has no positioned parent element, then its position is relative to 
<! DOCTYPE html>


Absolutely positioning makes the position of an element independent of the document flow and therefore does not occupy space. Absolutely positioned elements overlap with other elements.
6. Overlapping elements
Element positioning is independent of the document flow, so they can overwrite other elements on the page the Z-index property specifies the stacking order of an element (which element should be placed before, or later) an element can have a positive or negative stacking order:
<! DOCTYPE html>


Elements that have a higher stacking order are always preceded by lower stacking order elements. Note: If two anchor elements overlap, no z-index is specified, and the last element positioned in the HTML code will be displayed at the front.
Second, CSS float (floating)
1. What is CSS float (float)?
The float (float) of the CSS moves the element left or right, and the elements around it are rearranged. Float (float) is often used for images, but it is as useful in layout.
2. How the Elements float
The horizontal direction of the element floats, meaning that the element can only move left and right without moving up or down. A floating element moves as far as possible to the left or right until its outer edge touches the bounding rectangle of the containing box or another floating box. Elements that follow the floating element will surround it. Elements before the floating element will not be affected.
If the image is floating right, the following text flow will wrap around its left side:
<! DOCTYPE Html>


3. Floating elements adjacent to each other
If you put a few floating elements together, if there is space, they will be adjacent to each other. Here, we use the Float property on the picture gallery:
<! DOCTYPE html>

4. Clear float-use clear
After the element floats, the surrounding elements are rearranged, in order to avoid this situation, use the clear property. The Clear property specifies that no floating elements can appear on either side of the element. Use the Clear property to add a picture gallery to the text:
<! DOCTYPE html>


5. All floating properties in CSS
The number in the CSS column indicates that the property is defined by a different version of the CSS (CSS1 or CSS2).
Clear: Specifies that no floating elements are allowed around the element. Left, right, both, none, inherit
Float: Specifies whether a box (element) can float. Left, right, none, inherit
Third, CSS horizontal alignment (horizontal Align)
1, block element alignment
A block element is an element that occupies a full width and is a newline character before and after. Examples of block elements:
2, center alignment, using the margin property
The block element can set the left and right margins to "auto" alignment. Note: Using the Margin:auto property in IE8 does not work unless declared! The Doctypemargin attribute can be arbitrarily split into left and right margin settings automatically assigned, resulting in the center element:  
<! DOCTYPE html>


Tip: If the width is 100%, alignment is not effective. Note: The block element in IE5 has a margin handling bug. In order for the above example to work, in IE5, you need to add some extra code.
3. Use the Position property to set the left and right alignment
One way to align elements is to use absolute positioning:
<! DOCTYPE html>


Note: Absolute positioning is not related to document flow, so they can overwrite other elements on the page.
4, Crossbrowser compatibility issues
The fill of the element is always a good idea. This is to avoid visual differences in different browsers. IE8 and early have a problem when using the Position property. If a container element (in this case <div class= "container" >) specifies the width,! The DOCTYPE statement is missing, and IE8 and earlier versions add a margin of 17px to the right. This seems to be a scrolling reservation. Always set in the DOCTYPE declaration when using the Position property!
<! DOCTYPE html>


5. Use the Float property to set the left and right alignment
Using the Float property is one of the ways to align elements:
<! DOCTYPE html>


6, Crossbrowser compatibility issues
When aligning elements like this, it is always a good idea to predetermine the margin and the fill of the elements. This is to avoid visual differences in different browsers. IE8 and early have a problem when using the Float property. If a container element (in this case <div class= "container" >) specifies the width,! The DOCTYPE statement is missing, and IE8 and earlier versions add a margin of 17px to the right. This seems to be a scrolling reservation. Always set in the DOCTYPE declaration when using the float Property!

CSS positioning (positioning) with float (floating)