Home > Developer > JavaScript
Basic CSS knowledge (positioning and floating) and basic css knowledge
12Floating
Feature: float: left float: right float of the current element from the Document Stream
Note: * for parent and child elements, the child element floating cannot exceed the parent Element range.
* When multiple elements are set to floating, they are automatically arranged (horizontally)
* Sibling element. The last element is set to floating. The first element is not floating. The position of the last element cannot exceed that of the previous element.
* The text content is not covered by floating elements, but is surrounded by floating elements.
I clear floating clear
None-do not clear left-Clear left floating right-Clear right floating both-clear floating sides
I height collapse
Settings: parent-level element-No height set; child-level element-set height, floating
Result: The display height of the parent level is 0.
By default, the width and height are not set. The default width is the entire width of the current page. The height is 0 or the sum of the height of the child element.
U Solution
(1) set the height for the parent element (total height of all child elements)
Problem: The height attribute is set manually for the parent element. The height attribute value of the parent element is calculated.
(2) set both parent and child elements to floating
The width and height of the parent element are not set. Result: The width and height of the parent element are the sum of the width and height of each child element.
(3) clear floating
L BFC block pole formatting Environment
Block Formatting Context is an implicit attribute of an element.
By default, BFC is disabled. When BFC is enabled for an element, it has the following features:
* Elements in the Document Stream are not overwritten by floating elements.
* The vertical margin of the child element is not passed to the parent element.
* The element can contain floating child elements.
2. Enable BFC
Set the element to float, display to inline-block, or absolute position.
Set the overflow of an element to a non-visible value (usually set to hidden)
Add a child element at the end of all child elements and set the clear attribute value to both.
Note: Enabling BFC has some side effects. You need to select a method with few side effects.
13, Positioning
Ø static default value indicates static positioning (positioning is not enabled)
Ø relative indicates relative positioning and is not out of the Document Stream
Positioning Relative to parent element:
The position after positioning is calculated relative to the original position of the current element.
* When the element in the row is set to relative positioning-the effect Span of the inline element remains unchanged
Enable absolute positioning (enable positioning by default-does not change the display position of the current element)
Top, right, bottom, left, and so on.
Define parent and child elements:
1. Set absolute positioning for child-level elements only: locate relative to <HTML page>
2. Set absolute positioning for both parent and child elements:
Parent-level elements are located relative to <HTML page>, and child-level elements are located relative to <parent-level elements>.
Effect: Positioning Relative to <HTML page>
[Note: The Row Element is set to fixed positioning and absolute positioning to show the effect of the block element]
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
