フロートの定義とフロートのクリアランス (BFC)-CSSチュートリアル-php.cn

フロートの定義とフロートのクリアランス (BFC)

零下一度

リリース： 2017-05-10 11:57:30

オリジナル

1594 人が閲覧しました

Floating

1. float とは

要素の <a href="http://www.php.cn/wiki/919.html" target="_blank">float<p></p></a> の場合属性 <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> 属性不为 none 时就产生了浮动。

<p class="float">float</p>

ログイン後にコピー

.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

ログイン後にコピー

2. 浮动的影响

浮动会使元素脱离文档流，具体表现为：

父元素高度塌陷，即不会包含浮动元素。
比如上面的代码就会表现为

父元素高度塌陷

文本环绕。

フロートの定義とフロートのクリアランス (BFC)

文本环绕效果

可以注意到这里.normal元素的宽度覆盖了.float元素，但是.float元素下是没有文本的，也就是说文本被“挤”出来了，这是因为它虽然会脱离文档流，但是不会脱离文本流。这个效果也是float属性的本意。其代码如下：

<p class="float">float</p>

正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素

ログイン後にコピー

body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.normal {
  background-color: #fff;
}

ログイン後にコピー

浮动元素的外边距不会合并。
关于外边距合并的相关内容可以戳这里。
元素一旦浮动便会变成行内块元素，即 <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: inline-block。

3. 浮动的应用

上面提到的文本环绕。

写一个三列布局，左右固定宽度，中间自适应。

<body>
  <p class="left float">left</p>
  <p class="right float">right</p>
  <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
</body>

ログイン後にコピー

body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.left {
  float: left;
}
.right {
  float: right;
}
.mid {
  height: 100px;
  background-color: #fff;
  margin: 200px; /*故意加上了上下 margin 值*/
}

ログイン後にコピー

这里我故意加上了上了 margin 值，可以看到效果：

フロートの定義とフロートのクリアランス (BFC)

三列布局

body 也随 .mid 的 margin 往下掉了，这点可以用前面介绍的外边距合并来解释。

ps：我第一次自己写这个三列布局的时候，html 是这样写的

<body>
  <p class="left float">left</p>
  <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
  <p class="right float">right</p>
</body>

ログイン後にコピー

如上把中间自适应的元素写在中间，其实这样比较符合逻辑，但是如果这样写是行不通的，右边的元素会掉下来，因为 .mid 元素是块级元素，会占满整行，.left 不会掉下来是因为它本来就是脱离文文档流的浮动元素。