Let's look at each CSS property clear, clip-path,
columns, content, and counter with detailed explanations and examples.
1. clear (Managing Floats)
The clear property is used to control how elements behave around floated elements.
It prevents elements from wrapping around floated elements.
Values
| Values | Description |
| none | Default, allows floating elements next to it. |
| left | Prevents elements from floating on the left side. |
| right | Prevents elements from floating on the right side. |
| both | Prevents elements from floating on both sides. |
Example: Clearing Floats
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clearing Floats Example</title>
<style>
.container {
width: 300px;
border: 2px solid black;
}
.floated {
float: left;
width: 100px;
height: 100px;
background: lightblue;
margin-right: 10px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="floated">Floated</div>
<p>This paragraph will wrap around the floated div if `clear` is not applied.</p>
</div>
</body>
</html>The .clearfix class forces the container to wrap around floated elements.
2. clip-path (Clipping an Element)
The clip-path property allows you to define a shape (circle, polygon, ellipse) to clip an element to
Example: Clipping an Image into a Circle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clearing Floats Example</title>
<style>
.clipped-image {
width: 200px;
height: 200px;
clip-path: circle(50%);
}
.clip-triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.clip-ellipse {
clip-path: ellipse(50% 30%);
}
</style>
</head>
<body>
<div class="container clearfix">
<img class="clipped-image" src="https://www.mindstick.com/Images/businessImages/business-help.jpg" alt="Clipped Image">
<img class="clip-triangle" src="https://www.mindstick.com/Images/businessImages/business-help.jpg" alt="Clipped Image">
<img class="clip-ellipse" src="https://www.mindstick.com/Images/businessImages/business-help.jpg" alt="Clipped Image">
</div>
</body>
</html>Output
Note:
- It works best with images and block elements.
3. columns (CSS Multi-Column Layout)
The Columns property splits text into multiple columns.
Example: Creating a Two-Column Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clearing Floats Example</title>
<style>
.multi-column {
columns: 2;
column-gap: 20px;
column-rule: 2px solid gray;
}
</style>
</head>
<body>
<div class="multi-column">
<p>This text will be split into two columns. This text will be split into two columns. This text will be split into two columns. This text will be split into two columns. This text will be split into two columns. </p>
</div>
</body>
</html>Column Properties
| Property | Description |
| column-count | Number of columns. |
| column-width | Sets the width of each column. |
| column-gap | Space between columns. |
| column-rule | Line between columns. |
Note:
- Responsive designs can adjust columns dynamically.
4. content (CSS Generated Content)
The content property is used with the ::before and
::after pseudo-elements to insert content.
Example: Add icon before text on button
.button::before {
content: "🔹 ";
}<button class="button">Click Me</button>
Adding Quotes Dynamically
.quote::before {
content: "“";
}
.quote::after {
content: "”";
}<p class="quote">This is a quote.</p>Note:
- Useful for adding decorative content without modifying the HTML.
5. counter (CSS Counters)
The counter property is used to create automatic numbering.
Example: Auto-Numbering Sections
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counter Example</title>
<style>
.section {
counter-increment: section;
}
.section::before {
content: "Section " counter(section) ": ";
font-weight: bold;
}
</style>
</head>
<body>
<div class="multi-column">
<div class="section">Introduction</div>
<div class="section">Main Content</div>
<div class="section">Conclusion</div>
</div>
</body>
</html>Note
- Great for automatically numbering lists, sections or custom pagination.
Also, read: CSS Properties Explained: offset, opacity, order, outline, and overflow
Leave Comment