CSS Layout

The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

CSS (Cascading Style Sheets) layout techniques are used to control the design and positioning of HTML elements on a web page.

The float property

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

• left - The element floats to the left of its container
• right - The element floats to the right of its container
• none - The element does not float (will be displayed just where it occurs in the text). This is default
• inherit - The element inherits the float value of its parent

Example of CSS float left property

img {
/* pushes the image to the left of its container/parent */
float: left;
width: 100px;
height: 120px;
}

Example of CSS float right property

img {
/* pushes the image to the right of its container/parent */
float: right;
width: 100px;
height: 120px;
}

Here are the key points of CSS layout

1. Box Model

The foundational concept that treats every HTML element as a rectangular box, consisting of

• Content: The element’s content.
• Padding: Space between content and border.
• Border: A boundary around the padding and content.
• Margin: Space outside the border.

2. Display Property

Defines how elements are rendered:

• block: Fills the entire width and starts on a new line.
• inline: Takes only as much width as needed, without starting a new line.
• flex: Activates Flexbox layout.
• grid: Activates Grid layout.

3. Positioning

Specifies the element's placement:

static: Default, normal document flow. relative: Positioned relative to its normal position. absolute: Positioned relative to the nearest positioned ancestor. fixed: Positioned relative to the viewport. sticky: Combines relative and fixed positioning based on scroll.

4. Flexbox

A one-dimensional layout model used for rows or columns:

• Main properties: flex-direction, justify-content, align-items, etc.
• Useful for:Centering elements, distributing space evenly, and creating fluid layouts.

5. Grid Layout

A two-dimensional layout model for complex layouts:

• Main properties: grid-template-columns, grid-template-rows, gap, etc.
• Useful for: Creating structured, grid-based designs.

6. Float and Clear

Older layout techniques:

• float:Positions elements to the left or right.
• clear:Prevents elements from wrapping around floated elements.

7. Media Queries

For responsive design, adapting layouts to different screen sizes.

• Example: @media (max-width: 600px) { ... }

8. Responsive Design Techniques

Using flexible units (%, vw, vh) and frameworks (e.g., Bootstrap) to create layouts that adjust to various devices.