css 浮动后，父盒子没有高度解决办法
时间：2023年10月07日
编辑：佚名
如下所示，子元素 div2 本身具有高度和宽度，但由于其具有float:left；属性后。其父元素 div1 不具有高度。
<html>
<head>
</head>
<body>
<div id="div1">
<div id="div2" style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
当然我们可以直接给 div1 设置固定高度来解决。另外一种解决办法是给父元素 div1 设置 overflow:hidden 属性。如下所示：
<html>
<head>
</head>
<body>
<div style="overflow:hidden;">
<div style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
还有一种办法就是使用css3来解决，这种比较常用
<html>
<head>
</head>
<style>
.box1::after{
content: "";
display: block;
clear: both;
}
</style>
<body>
<div class="box1">
<div style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div id="div1">
<div id="div2" style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
当然我们可以直接给 div1 设置固定高度来解决。另外一种解决办法是给父元素 div1 设置 overflow:hidden 属性。如下所示：
<html>
<head>
</head>
<body>
<div style="overflow:hidden;">
<div style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
还有一种办法就是使用css3来解决，这种比较常用
<html>
<head>
</head>
<style>
.box1::after{
content: "";
display: block;
clear: both;
}
</style>
<body>
<div class="box1">
<div style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
相关文章
猜你需要
