CSS Clearfix
CSS Clearfix: A clearfix (or clear float) in CSS is for a component to clear or fix the child component, so we don’t need to insert additional markup. The clear float determines the bug, which appears when two or more floated components are loaded after each other.
Assume if we set any sidebar’s position towards the left side of primary content blocks. Though, we can take the component overlap and collapse to each other. Also, we can assume it as if any child component is taller as compared with its parent component and floated; it will get started to overflow outer to its container.
To overcome the above problem, we can apply overflow: auto; attribute to a containing component.
Let’s take an example to understand it:
Example:
In the following example, the image is taller as compared with the containing component and floated, so it overflows outer to its container.
We are making a flo class and overflow: auto; attribute to a corresponding component as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border: 3px solid black;
padding: 5px;
background-color: lightblue;
font-size:20px;
}
img
{
float: right;
border: 3px solid navy;
}
p
{
font-size:20px;
clear:right;
}
.flo
{
overflow: auto;
}
</style>
</head>
<body>
<h1> Without Clearfix </h1>
<div>
<img class="img1" src="Flower1.jpg">
Welcome to this Page. It is the example to clear the concept of 'Clearfix' property. Here, clearfix is not used.
</div>
<p> Use the overflow:auto; CSS attribute </p>
<h1> With Clearfix </h1>
<div class="flo">
<img class="img2" src="Flower1.jpg">
Welcome to this Page. It is the example to clear the concept of 'Clearfix' property. Here, clearfix is used.
</div>
</body>
</html>
The above mentioned clear float method implements well if we handle the margins and paddings. Although a new practice to clear float is safer for use.
Output:
Let’s take another example to understand this concept more clearly:
Example:
In the following example, we have applied the clear attribute on ‘both’, i.e. floating components will not permit for both the right and left sides. Also, we apply the display attribute on ‘table’, which creates the component behave like the <table> component of HTML. Then we have to let the content blank.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border: 3px solid black;
padding: 5px;
background-color: lightblue;
font-size: 20px;
}
img
{
float: right;
border: 3px solid navy;
}
p
{
font-size: 20px;
clear: right;
}
.flo:after
{
content:'.';
clear: both;
display: table;
}
</style>
</head>
<body>
<h1> Without Clearfix </h1>
<div>
<img src="Flower1.jpg">
Welcome to this Page. It is the example to clear the concept of 'Clearfix' property. Here, clearfix is not used.
</div>
<p> Another clearfix technique </p>
<h1> With Clearfix </h1>
<div class="flo">
<img src="Flower1.jpg">
Welcome to this Page. It is the example to clear the concept of 'Clearfix' property. Here, clearfix is used.
</div>
</body>
</html>
Output:
CSS Icons
CSS icons are specified like a symbol or image used inside a computer interface assign to any element. CSS icons are the graphical depiction of any program or file that supports users to recognize the file type quickly.
It is a most comfortable way of inserting icons to any HTML page by using an icon library. It is feasible to format an icon library with the use of CSS. We may customize any icon based on their size, shadow, and color.
Here we are mentioning some of the essential icon libraries like Google icons, Font Awesome icons, and Bootstrap icons that may be used efficiently inside the CSS. We don’t need to download or install these icon libraries.
Description of the above libraries is as follows:
Font Awesome icons
We have to insert a link to use font awesome icons library. This link will be defined in the <head> section, which is mentioned below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">