One of the major problems with the structure of HTML is that if you have a child div inside parent div, the child div automatically flows around the parent div. The solution to this problem is using clear property of CSS.
Bootstrap allows us to use a class named clearfix which is used to clear the floated contents inside any container.
Example 1: Without clearfix property. In the below program two buttons are floated to left and right.
<!DOCTYPE html><html>
<head>
<title>Bootstrap Example</title>
<!-- Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="bg-info">
<button type="button" class="btn btn-secondary left">
floated left button
</button>
<button type="button" class="btn btn-secondary right">
floated right button
</button>
</div>
</body>
</html>
|
Output:
Clearfix property clear all the floated content of the element that it is applied to. It is also used to clear floated content within a container.
Example 2: With clearfix property. Without using the clearfix class, the parent div may not wrap around the children button elements properly and can cause a broken layout.
<!DOCTYPE html><html>
<head>
<title>Bootstrap Example</title>
<!-- Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary left">
floated left button
</button>
<button type="button" class="btn btn-secondary right">
floated right button
</button>
</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari