In this post, we will learn how to fix the issue of collapsing parent in CSS. When we apply float property to an element, then the layout of the element that comes after it gets spoiled. This is called Collapsing Parent issue in CSS. How we can get rid of this issue, we will learn in this post.


How To Fix The Issue Of Collapsing Parent In CSS ?


Fix The Issue Of Collapsing Parent

To fix this issue we use "clearfix" hack. We gave .clearfix class to parent div and style this with the help of :after pseudo-element. 


We follow the following steps to fix this issue:


Step 1: In this step we write HTML code.


<!DOCTYPE html>
<html>
<head>
<title> How To Fix The Issue Of Collapsing Parent In CSS ?</title>
<style>

/*Paste CSS code here...*/

</style>
</head>
<body>

<div class="outer-box clearfix">

<div class="box-left">Left Box</div>

<div class="box-right">Right Box</div>

</div>

</body>
</html> code-box


Step 2: Now we write CSS code.


.clearfix:after{
content: "";
clear: both;
display: table;
}

.outer-box{
background-color: red;
border: 2px solid #000000;
}

.box-left, .box-right{
width: 70px;
margin: 10px;
padding: 10px;
color: #fff;
background: #000;
text-align: center;
}

.box-left{
float: left;
}

.box-right{
float: right;
} code-box

Put this CSS code inside the HTML code and you will see the effect. Remove clearfix class and then run the code. You will be see the issue of collapsing parent.



Summary

In this post we learned how to fix the issue of collapsing parent in CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post