CSS 浮动 clear问题

Question

CSS 浮动 clear问题

发布于
2016-08-05

<body>
  <div id="vice-function">
    <span>C</span>
    <span>+/-</span>
    <span>%</span>
  </div>
  <div id="number">
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>0</span>
    <span>.</span>
  </div>
  <div id="main-function">
    <span>/</span>
    <span>*</span>
    <span>-</span>
    <span>+</span>
    <span>=</span>
  </div>
</body>

#number span:nth-child(3n+0):after{
  content:".";
  display: block;
  height: 0;
  visibility: hidden;
  clear:both;
}
#number span{
  display:block;
  float:left;
  width: 50px;
  height: 30px;
  border: 1px solid black;
}

执行后显示如下：
图片描述