浮动元素超出其父级? [英] Floated element gets outside of its parent?
本文介绍了浮动元素超出其父级?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个左浮动div在另一个div和浮动的divs内容正在离开父母。
I have an left floated div in another div and the floated divs content is getting out of the parent.
查看生活:
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 600px;
}
ul li {
border: solid 1px #000;
margin: 15px 0;
}
.img-section {
float: left;
border: solid 1px red;
}
<ul>
<li>
<div class="img-section">
<img src="http://www.placehold.it/50X100">
</div>
Hello world
</li>
<li>
How to avoid the red box getting out of the black one? (and hiding another list element)
</li>
</ul>
我一直在尝试清除:左/右/两者,但没有任何帮助。
I've been trying clear: left/right/both, but nothing helps.
如何避免这种情况?由于图片重叠(不包括在上面的示例中),我需要浮动整个div(而不是内容)。
How to avoid this? I HAVE to float the whole div (not the contents) due to image overlay (not included in example above)
推荐答案
通过将 overflow:auto
添加到 ul li
,如果我正确理解您的问题。
You can fix it by adding overflow:auto
to ul li
, if I understand your problem correctly.
这篇关于浮动元素超出其父级?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文