CSS float 浮动

[PolluxLee]

Values 值

.module {
  float: left | right | none;
}

value	description
left	元素必须浮动在其所在的块容器左侧
right	元素必须浮动在其所在的块容器右侧
none	元素不进行浮动

Float Position 浮动元素定位

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素

<div class="wrapper">
  <div class="left1"></div>
  <div class="left2"></div>
  <div class="right"></div>
  <p>People come into your life for a reason, a season, or a lifetime.
When someone is in your life for a REASON, it is usually to meet a need you have expressed or just felt. They have come to assist you through a hard time, to provide you with guidance and support, to aid you physically, emotionally or spiritually. Then, suddenly, the person disappears from your life. Your need has been met; their work is done.</p>
</div>

.wrapper {
  background: grey;
}

.left1, .left2, .right{
  width: 100px;
  height: 100px;
  margin: 20px;
}

.left1 {
  float: left;
  background: blue;
}

.left2 {
  float: left;
  background: red;
}

.right {
  float: right;
  background: green;
}

Clearing the Float 清除浮动

浮动的元素的高度比它们所在的容器元素（是块元素）的高度小。然而如果块元素内的文本太短，不足以把块元素的大小撑到高度大于所有浮动元素的高度，我们可能会看到意想不到的效果：

clear 属性

value	description
left	元素被向下移动用于清除之前的左浮动
right	元素被向下移动用于清除之前的右浮动
both	元素被向下移动用于清除之前的左右浮动
none	元素不会向下移动清除之前的浮动

当应用于 非浮动块 时，它将非浮动块的 边框边界 移动到所有相关浮动元素 外边界 的下方。这个行为作用时会导致 margin collapsing 不起作用

当应用于 浮动元素 时，它将元素的 外边界 移动到所有相关的浮动元素 外边界 的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素

方法1. 添加空元素

<div class="wrapper">
  <div class="left1"></div>
  <div class="left2"></div>
  <div class="right"></div>
  <p>People come into your life for a reason, a season, or a lifetime.</p>
  <div style="clear: both;"></div>
</div>

方法 2. 设置 overflow

创建一个 BFC 清除浮动，设置 overflow 的值不为 visible

也正是因为，上面例子中，float 创建了几个 BFC，而又因为 BFC 的内部布局，是不会受外部影响的特性，就可以通过这个思路，创建一个包含所有 float 的 BFC，使得几个 float 成为 BFC 内部元素

<div class="wrapper" style="overflow: hidden;">
  <div class="left1"></div>
  <div class="left2"></div>
  <div class="right"></div>
  <p>People come into your life for a reason, a season, or a lifetime.</p>
</div>

方法 3. Clearfix 方法

利用伪元素清除浮动

/* ... */
.wrapper:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Float 实现常用布局

issue #47

参考

https://developer.mozilla.org/zh-CN/docs/CSS/float

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

https://css-tricks.com/almanac/properties/f/float/

http://nec.netease.com/library/category/#grid