CSS Clearfix and CSS Icons
CSS Clearfix
The CSS Clearfix allows an element to fix or clear its child elements without adding additional markup. It improves the error that occurs when multiple floated elements are stacked next to each other.
For example, if we specify the position of a sidebar to be by the left side of the main content block, we get the elements to collapse and overlap with each other. We can understand it as a child element that has floated and is now taller than its parent element. This will cause it to overflow outside its container.
It is possible to overcome this problem by using the overflow: auto; property to the element containing the container.
Here is an example to help us understand.
Example
In this example, the image is floated and taller than the element containing it, so it overflows outside its container.
We are now creating a class and adding the overflow: auto; property to the corresponding element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid blue;
padding: 5px;
background-color:pink;
font-size:20px;
}
img{
float: right;
border: 3px solid red;
}
p{
font-size:20px;
clear:right;
}
.jtp{
overflow: auto;
}
</style>
</head>
<body>
<h1>Without Clearfix</h1>
<div>
<img class="img1" src="rose.png">
Welcome. We are Techstack. We help you understand various topics on programming, which in the end, makes your life as a programmer way easier.
</div>
<p>Use the overflow:auto; CSS property</p>
<h1>With Clearfix</h1>
<div class="rose">
<img class="img2" src="rose.png">
Welcome. We are Techstack. We help you understand various topics on programming, which in the end, makes your life as a programmer way easier.
</div>
</body>
</html>
The above method works well as long as the paddings and margins are appropriately managed. Although, a modern way to clearfix is safer to use.
Below is another method of clearfix.
Example
In this example, the clear property is set to 'both,' which means that the floating elements will not be allowed on both the left and right sides. The display property is also to 'table,' which makes the element behave like <table> element of HTML, and we also have to leave the content empty.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid blue;
padding: 5px;
background-color:pink;
font-size:20px;
}
img{
float: right;
border: 3px solid red;
}
p{
font-size:20px;
clear:right;
}
.jtp:after{
content:'.';
clear:both;
display: table;
}
</style>
</head>
<body>
<h1>Without Clearfix</h1>
<div>
<img src="rose.jpg">
Welcome. We are Techstack. We help you understand various topics on programming, which in the end, makes your life as a programmer way easier.
</div>
<p>Another clearfix method</p>
<h1>With Clearfix</h1>
<div class="rose">
<img src="rose.png">
Welcome. We are Techstack. We help you understand various topics on programming, which in the end, makes your life as a programmer way easier.
</div>
</body>
</html>
CSS Icons
Icons are defined as images or symbols used in any computer interface which is referring to an element. Simply put, it refers to a way of identifying a type of file or program quickly using a graphical representation.
The icon library makes it easy to add icons to our HTML page, and it is possible to format the library icons using CSS. The icons can be customized according to color, shadow, size, etc.
Some icon libraries such as Bootstrap, Font Awesome, and Google icons can be used in CSS easily without needing to install or download the above-mentioned libraries.
Below we will examine the above-mentioned icon libraries in more detail.
Font Awesome Icons
For this library to be used on the HTML page, you need to add the following link within the <head></head> section.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Here is an example to help you understand.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
text-align:center;
background-color:lightgreen;
}
.fa{
color:red;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Font Awesome Library Example</h1>
<i class="fa fa-bars"></i>
<i class="fa fa-book"></i>
<i class="fa fa-home"></i>
<i class="fa fa-phone"></i>
<i class="fa fa-file"</i>
</body>
</html>
Bootstrap Icons
Similar to the font awesome library, to be able to add the bootstrap icons to our HTML page, you need to use the link below in the <head></head> section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body{
text-align:center;
background-color:lightgreen;
}
.glyphicon{
color:red;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Bootstrap icons</h1>
<i class="glyphicon glyphicon-book"></i>
<i class="glyphicon glyphicon-file"></i>
<i class="glyphicon glyphicon-heart"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-phone"></i>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-cloud"></i>
</body>
</html>
Google Icons
Similar to the above libraries, to be able to add it to our HTML page, you simply have to add the link given below in the <head></head> section.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body{
text-align:center;
background-color:lightgreen;
}
.material-icons{
color:red;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Google icons</h1>
<i class="material-icons">cloud</i>
<i class="material-icons">phone</i>
<i class="material-icons">remove</i>
<i class="material-icons">traffic</i>
<i class="material-icons">light</i>
</body>
</html>
