gpt4 book ai didi

css - 清除级联 float 元素中的 float

转载 作者:太空宇宙 更新时间:2023-11-03 18:48:29 25 4
gpt4 key购买 nike

在级联 float 元素布局中;当我尝试清除内部元素的 float 时,它会扩展元素高度以覆盖外部 float 元素的大小。这是示例:

<div class="right">
right
</div>
<div class="left">
<div class="top">
<span>top</span>
<div class="right-float-inside">right-float-inside</div>
<div class="clear-float"></div>
</div>
left
</div>

对应的css

div {
padding: 5px;
}
.top {
background-color: #ee0;
}
.left {
background-color: #e00;
margin-right: 200px;
}
.right {
background-color: #0e0;
float: right;
height: 80px;
width: 200px;
}
.right-float-inside {
height: 50px;
float: right;
background-color: #00e;
}
.clear-float {
clear: both;
}

output

这是一个活生生的例子: http://jsfiddle.net/UUpaP/4/

我期望得到的是紧接在蓝色 div 之后的黄色 div。我得到的是黄色 div 在绿色之后结束。

如何限制清除范围?

最佳答案

您需要的是 overflow: hidden 用于您的 .left 元素。 working example

关于css - 清除级联 float 元素中的 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15636153/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com