javascript - 在 React 教程中，为什么我注释掉 clear fix 后外观没有变化？

Question

我正在关注 React tutorial并对他们的 starter code 有疑问:

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

使用以下 CSS，我在其中注释掉了 .board-row:after 指令:

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

/* .board-row:after {
  clear: both;
  content: "";
  display: table;
} */

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

我不明白的是在注释掉这些指令之后，

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

这似乎是 All About Floats 中描述的“简易清算方法”的实现。 ，我仍然看到这些方 block 像原来一样组织成“阵列”，而不是排成一排。由于默认显示属性是 inline，因此我希望所有 9 个方 block 都显示在一行中，而无需使用“简单清除方法”。为什么外观没有变化？

Answer 1

tl;dr 使用 Flexbox

---

你好像在很多不同的地方都有误解。

1. 此问题并非 React 特有，而是您使用的 HTML 和 CSS 的问题。您将 .board-row:after 称为“指令”，但它实际上只是一个简单的 CSS 规则

2. 不同的 HTML 元素具有不同的默认 CSS 属性值。您正在使用 div 元素，它的默认 display 值为 block，这意味着它会掉到下一行，而不是与其 sibling “内嵌”

3. 几年前，要实现您尝试对设置为 display: block 的元素执行的操作，唯一的方法是使用 float 。将 float: left 应用于一系列 div 会使它们在同一行上彼此相邻出现。然而，使用 float 可能会很痛苦；一个痛点是，为了让父 HTML 元素知道其中使用 float 的元素，您需要通过在末尾添加一个带有 clear: both 的元素来“清除”您的 float 。这就是 clearfix 技巧发挥作用的地方。然而，如今，Flexbox是实现您想要做的事情的方法。