IT Course CSS Basics 028_Float, Positioning, Alignment

Float

In CSS, float is a layout technique that uses the float property to make elements float along the left or right side of the container, allowing other elements to wrap around it.

Example:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>

Effect: Example effect Floating elements may cause the parent element’s height to collapse, may affect elements in other DIVs, and multiple floating elements on the same line may overlap. The clear property is needed to control their mutual effects.

Example:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }
7
    /* Use `clear` property to cancel floating element effects
8
     .content {
9
        clear: both;
10
    } */

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>
3

4
    <div class="content">
5
        This is text that will be affected.
6
    </div>

Effect: Example effect Example:

1
    .float-left {
2
        float: left;
3
    }
4
    .float-right {
5
        float: right;
6
    }

1
    <img class="float-left" src="zhaojian1.jpg" alt="" srcset="">
2
    <div class="float-right">January 25, 2024</div><div class="float-right">Article Title Article Title Article Title</div>

Effect:

Example effect

Float was an early technique for creating multi-column layouts, but in modern layouts, more flexible layout techniques like Flexbox or Grid are usually recommended.

Positioning

In CSS, positioning refers to setting the positioning method of elements through the position property, and specifying the position of elements relative to their nearest positioned parent elements through the top, right, bottom, left properties.

Positioning is relative to the nearest positioned (position is not static) ancestor element. If there is no positioned ancestor element, it is positioned relative to the initial containing block (usually the <html> element).
Absolutely positioned and fixed positioned elements are removed from the normal document flow and may affect the layout of other elements.
Property values typically use pixels (px) or percentages (%).

Static Positioning static

Static Positioning is the default value of the position property and usually does not need to be explicitly specified. Statically positioned elements are arranged normally in the document flow and are not affected by the top, right, bottom, left properties.

Initial Positioning initial

In CSS, initial is a keyword used to reset property values to their initial values. For the position property, its initial value is static. Using position: initial; is equivalent to not setting the position property.

Relative Positioning relative

The element is positioned relative to its normal position.

Example:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        background-color: aquamarine;
5
    }
6
    .relative-example {
7
        position: relative;
8
        top: 100px;
9
        left: 20%;
10
    }

1
  <!-- <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> Try adding br or other elements -->
2
  <div class="base relative-example"></div>

Effect: Example effect

Absolute Positioning absolute

The element is positioned relative to its nearest positioned ancestor element.

Example:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .absolute-example {
6
        position: absolute;
7
        top: 50px;
8
        left: 100px;
9
        background-color: blueviolet;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base absolute-example"></div>

Effect:

Example effect

Fixed Positioning fixed

The element is positioned relative to the browser window and always maintains a fixed position on the screen.

Example:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .fixed-example {
6
        position: fixed;
7
        bottom: 40%;
8
        left: 40%;
9
        background-color: gold;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
3
    <div class="base fixed-example"></div>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Effect:

Example effect

Sticky Positioning sticky

The element becomes fixed positioned when scrolled to a specific position, otherwise it is relatively positioned.

Example:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .sticky-example {
6
        position: sticky;
7
        top: 10%;
8
        left: 40%;
9
        background-color: darkcyan;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base sticky-example"></div>
3
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
6
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Effect:

Example effect

Inherit Positioning inherit

The element becomes fixed positioned when scrolled to a specific position, otherwise it is relatively positioned.

Example:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .inherit-example {
6
        position: inherit;
7
        top: 100%; /* Note the boundary */
8
        left: 100%; /* Note the boundary */
9
        background-color: violet;
10
    }

1
    <div class="base relative-example">
2
        <div class="base inherit-example"></div>
3
    </div>

Effect: Example effect

Stacking Order (Overlapping Elements)

z-index is a CSS property used to control stacking order. It determines the display order of an element in vertical stacking, i.e., which element will be in front of or behind which element.

z-index values can be negative.
Elements with larger z-index will cover elements with smaller values.
z-index only works on positioned elements (position is not static)
z-index requires the element’s opacity to be set to non-0

Example:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        position: absolute;
5
    }
6
    .z-index-example1{
7
        background-color: red;
8
        z-index: 9;
9
    }
10
    .z-index-example2{
11
        background-color: blue;
12
        z-index: 1;
13
    }

1
    <div class="base z-index-example1"></div>
2
    <div class="base z-index-example2"></div>

Alignment

CSS alignment refers to controlling the horizontal and vertical alignment of elements through CSS properties. CSS alignment properties can be applied to any element, including text, images, tables, lists, etc.

Common alignment properties have the following values:

left: Left alignment
center: Center alignment
right: Right alignment
top: Top alignment
middle: Middle alignment
bottom: Bottom alignment

Horizontal Alignment `text-align`

Used to set the horizontal alignment of text content in the element box.

Example:

1
.text-center {
2
  text-align: center; /* Horizontal center alignment */
3
}
4
.text-left {
5
  text-align: left; /* Left alignment */
6
}
7
.text-right {
8
  text-align: right; /* Right alignment */
9
}
10
.text-justify {
11
  text-align: justify; /* Justify alignment */
12
}

1
  <div class="text-center">This is a sentence ABCDE 12345</div>
2
    <div class="text-left">This is a sentence ABCDE 12345</div>
3
    <div class="text-right">This is a sentence ABCDE 12345</div>
4
    <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel sapien accumsan, ac efficitur nulla bibendum. Nullam posuere fermentum nulla, in ultricies leo gravida sit amet. Vestibulum ut mi vitae libero accumsan dapibus.</div>

Effect: Example effect

Vertical Alignment `vertical-align`

Used to set the vertical alignment of inline elements within an element. Usually used for inline elements and has no direct effect on block-level elements.

Example:

1
.base{
2
    height: 150px;
3
}
4
.vertical-align-baseline {
5
    vertical-align: baseline; /* Default baseline alignment */
6
}
7
.vertical-align-top {
8
    vertical-align: top; /* Top alignment */
9
}
10
.vertical-align-middle {
11
    vertical-align: middle; /* Middle alignment */
12
}
13
.vertical-align-bottom {
14
    vertical-align: bottom; /* Bottom alignment */
15
}

1
    <div class="base">
2
        <img class="vertical-align-baseline" src="zhaojian1.jpg" alt="" srcset="">This is a sentence ABCDE 12345
3
    </div>
4
    <div class="base">
5
        <img class="vertical-align-top" src="zhaojian1.jpg" alt="" srcset="">This is a sentence ABCDE 12345
6
    </div>
7
    <div class="base">
8
        <img class="vertical-align-middle" src="zhaojian1.jpg" alt="" srcset="">This is a sentence ABCDE 12345
9
    </div>
10
    <div class="base">
11
        <img class="vertical-align-bottom" src="zhaojian1.jpg" alt="" srcset="">This is a sentence ABCDE 12345
12
    </div>

Effect: Example effect

Float

Positioning

Static Positioning static

Initial Positioning initial

Relative Positioning relative

Absolute Positioning absolute

Fixed Positioning fixed

Sticky Positioning sticky

Inherit Positioning inherit

Stacking Order (Overlapping Elements)

Alignment

Horizontal Alignment text-align

Vertical Alignment vertical-align

Comments

Horizontal Alignment `text-align`

Vertical Alignment `vertical-align`