How to solve the problem that parents with CSS collapse have floating children
This article introduces the relevant knowledge of "how to solve the problem of CSS collapse parents having floating children". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!
A: Use CSClear attribute
When the float attribute is applied to an element within a non-floating parent element, the parent element does not automatically stretch to accommodate the floating element. This behavior is often referred to as a crash parent. It's not always obvious if you don't apply certain visual attributes (such as backgrounds or borders) to the parent element, but it's important to be aware of and to handle them to prevent odd layouts and cross-browser issues.
CSS:after pseudo-element is used in combination with the content attribute to solve the problem of parent item crash in Firefox, Chrome, Safari, etc.
Try this code."
Fixing Collapsing Parent Issue
.clearfix:after{
content:". ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.container{
background:yellow;
border: 1px solid #000000;
}
.column-left, .column-right{
width: 200px;
margin: 10px;
padding: 10px;
}
.column-left{
float: left;
background: #ff0000
}
.column-right{
float: right;
background: #00ff00;
}
Floated to left.
Floated to right.
"How to solve CSS collapse parents have floating children problem" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!
