Home > Developer > Web Develop
1. Floating of the box
In a standard flow, a block-level element automatically stretches in the horizontal direction, knowing the edges of the element that contains it, and in the vertical direction with the adjacent elements, not side-by-sides.
The Float property in CSS, default to None. When the value of the float property is set to left or right, the element is tightly tightened to its parent element, either to the side or to the other side. By default, the width of the box is no longer stretched, but is determined by the width of the contents of the box.
Float:left;
You can use clear to clear the float:
Clear:left | Right | Both
2. Positioning of the box
There is a position property in the CSS that is used for positioning operations. The Position property can be set to one of 4 property values:
◊static: The default property value, which is laid out according to the standard flow (including the floating mode);
◊relative: Relative positioning, the position of a box with relative positioning is often based on the layout of the standard flow, and then offsets the specified distance from the original standard position of the box relative to it. The relatively positioned box is still in the standard flow, and the box behind it still treats it as a standard flow.
◊absolute: Absolute positioning, the position of the box is offset by its containing frame. The absolutely positioned box is detached from the standard flow. It has no effect on the positioning of the adjacent box, and the other boxes are as if the box does not exist.
◊fixed: fixed positioning, which is similar to absolute positioning, is only positioned as a reference to the browser window, while dragging the browser's scroll bar, the object position remains unchanged.
2.1 Static
Static is the default value, indicating that the block remains in its original position without any moving effect. Not setting any position property is equivalent to using static mode.
2.2 Relative
With relative relative positioning, in addition to setting the Position property to relative, you need to specify a certain offset, which is specified horizontally by the left or right property, and vertically by top or bottom.
<!DOCTYPE HTML><HTML><Head> <title></title> <styletype= "Text/css">. Relative{position:relative;Top:20px; Left:20px;width:500px; } </style></Head><Body> <Divclass= "relative">Position relative offset</Div></Body></HTML>
In the example above,. Relative if you do not set width, the horizontal scroll bar appears when you preview in a browser because the block element automatically stretches to the same width as the parent element, plus the left 20px.
◊ Use a relatively positioned box to reach a new position relative to its original position by offsetting the specified distance.
◊ the use of relatively positioned boxes is still in the standard flow, which has no effect on parent blocks and sibling boxes.
2.3 Absolute
CSS series: The floating and positioning of boxes in CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
