html - 使用 css clear 创建 css 网格 :both and nth of type

Question

这是我的代码 http://jsfiddle.net/wahidpolin/b9j6ktfq/

li{
	display:inline-block;
	width: 100px;
	height: 100px;
	text-align: center;
	border: 1px solid #000;
	margin-bottom: 5px;
	float:left;
	}
li:nth-of-type(3n+1){
	background-color: yellow;
	clear:both;
	}

<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>

根据我的理解，1,4,7,10 应该在一行中，因为我已经明确声明:两者都对他们来说，但事实并非如此，这里发生了什么？

Answer 1

http://jsfiddle.net/dq8c66oc/

这就是您要找的东西吗？

li {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px solid #000;
  margin-bottom: 5px;
  float: left;
}
li:nth-of-type(3n+1) {
  background-color: yellow;
  display: block;
  float: none;
  clear: both;
}

<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>

---

编辑:

其工作原理是黄色 block 不是内联 block 。这意味着它们将给定页面上的每个同级元素推到其下方。 Float none 确保任何 float 元素不会与 block 交互。清除两者可以在渲染 div 之前清除所有先前的 float 元素。