如何解决 CSS 折叠父级有浮动子级的问题
主题:HTML / CSS
答案:使用 CSS clear 属性
当浮动属性应用于非浮动父元素内的元素时，父元素不会自动伸展以容纳浮动元素。 这种行为通常称为折叠父项。 如果您不将一些视觉属性（如背景或边框）应用于父元素，这并不总是很明显，但重要的是要注意并且必须处理以防止出现奇怪的布局和跨浏览器问题。
CSS :after pseudo-elementcontent 属性一起用于解决 Firefox、Chrome、Safari 等浏览器中的折叠父级问题。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>解决折叠父级问题</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 对齐 上的教程，了解有关修复折叠父项的更多解决方案。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
