如何避免空的透明div?[英] How to avoid empty clear divs?

本文是小编为大家收集整理的关于如何避免空的透明div?的处理方法,想解了如何避免空的透明div?的问题怎么解决?如何避免空的透明div?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我最近一直在使用很多浮标:

<div id="buttons">
  <input type="button" id="btn1" value="Button One">
  <input type="button" id="btn2" value="Button Two">
  <input type="button" id="btn3" value="Button Three">
</div>

有时我会在右侧浮动一个按钮.有时我会把它们全部浮动到右边.这是问题开始的地方.如果我这样做的话,它确实会引起流程,所以我必须继续介绍这些内容:

<div style="clear:both;"></div>

最后.如果我不是将它们全部浮动.

有很好的解决方案吗?

推荐答案

是的,在容器IE上使用overflow: hidden:

<style type="text/css">
#buttons { overflow: hidden; }
</style>

其他推荐答案

这是CSS学习曲线的重要组成部分.当您浮动物品时,它们的包含元素不再考虑浮动元素的垂直高度.您可以使用几种解决方案来解决困境.

只需为您的#BUTTON容器指定按钮的高点:

#button { height: 30px; }

更典型的解决方案将是Clearfix Hack.这是一个很漂亮的子弹,也将无需添加额外的标记和内联CSS即可.

#buttons:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#buttons {
    display: inline-block;
}

html[xmlns] #buttons {
    display: block;
}

* html #buttons {
    height: 1%;
}

其他推荐答案

只要您定义父的溢出,它就会清除所有浮标.

使用Overflow:在父母身上自动,您可以走!

http://www.sitepoint. com/blogs/2005/02/26/简单清理of-floats/

(我已经使用Display:也没有尝试过这项工作,但没有尝试过.)

本文地址:https://www.itbaoku.cn/post/566645.html