如何解决 CSS 折叠父级有浮动子级的问题

最新推荐文章于 2024-10-08 09:33:56 发布

qq_25153359

最新推荐文章于 2024-10-08 09:33:56 发布

阅读量259

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_25153359/article/details/139366679

版权

答案:使用 CSS `clear` 属性

当浮动属性应用于非浮动父元素内的元素时，父元素不会自动伸展以容纳浮动元素。这种行为通常称为折叠父项。如果您不将一些视觉属性（如背景或边框）应用于父元素，这并不总是很明显，但重要的是要注意并且必须处理以防止出现奇怪的布局和跨浏览器问题。

CSS :after pseudo-element 与 content 属性一起用于解决 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>