怎么解决CSS崩溃的父母有浮动子女问题
本篇内容介绍了“怎么解决CSS崩溃的父母有浮动子女问题”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
答：使用CSSclear属性
当将float属性应用于非浮动父元素内的元素时，父元素不会自动拉伸以容纳浮动元素。这种行为通常称为崩溃父项。如果您不对父元素应用某些视觉属性（例如背景或边框），这并不总是很明显，但是要注意并必须加以处理以防止出现奇怪的布局和跨浏览器问题，这一点很重要。
CSS:after pseudo-element与content属性结合使用，可解决Firefox，Chrome，Safari等浏览器中父项崩溃的问题。
例试试这个代码»
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fixing Collapsing Parent Issue</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="column-left">Floated to left.</div>
<div class="column-right">Floated to right.</div>
</div>
</body>
</html>
“怎么解决CSS崩溃的父母有浮动子女问题”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
