overflow:hidden / float属性

时间:2016-12-20 16:52:50

标签: css-float overflow

我真的不明白为什么overflow:hidden会使float属性效果被删除。

这里是下面的消息来源,我很难用。

<div class="float-frame">
  <div class="float-unit">A</div>
  <div class="float-unit">B</div>
  <div class="float-unit">C</div>
  <div class="float-unit">D</div>
</div>    <!--html5 sources--!>

.float-frame {
  background: #eee;
  border: 1px solid #ddd;
  padding: 10px;
  overflow:hidden;}

.float-unit {
  width: 50px;
  background: #333;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  float: left;        /* css3 sources */
  }

如你所见,overflow:hidden属性的存在使得视图与不存在属性的情况完全不同。

我了解到overflow:hidden属性是为了让内容在溢出内容所属的框时不可见。

但为什么会这样呢?我的意思是溢出:隐藏属性使浮动效果被删除..

我搜索了很多文章......但我无法让自己完全理解。

1 个答案:

答案 0 :(得分:0)

这是因为 output$analysis1 <- renderPlot({ df <- m1 df <- subset(df, df$rcid %in% unique(Select_voting()$rcid)) ggplot(subset(df, unsc_region == 'Latin America'), aes(x = input$variable, y = reorder(CountryAbb, input$variable), color = ordvote)) + geom_point(size=3) + theme_light() + ggtitle("Latin America") + scale_colour_manual(values=vcolors) }) 创建了一个新的“块上下文”,请参阅this StackOverflow article on a similar issue

我的建议是,如果您对这些元素的定位方式具有灵活性,请尝试删除overflow: hidden;中的float: left;并将.float-unit添加到display: flex;浮动样式并不意味着定位块元素。