链接

使用float就意味着使用了块状布局，在某些情况下它修改了display的计算值

float-block

图中inline-block和table-*系列以及flex-*系列的本身会创建一个新的BFC，好像也没啥关系诶…

注：使用js访问这个float属性时，要写成cssFloat。

how floated elements are positioned

当一个元素被设置为浮动，它就脱离了文档的正常流（但它仍然是文档的一部分），它向左或右移动，直到它碰到了 包含它的容器的边缘或者其他的浮动元素的边缘(注意这个描述！！！)。

比如下面的例子：

1
2
3
4
5
6
7
8
9
10
<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
     lectus vulputate. Donec id iaculis velit. Aliquam vel
     malesuada erat. Praesent non magna ac massa aliquet tincidunt
     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan
}

清除浮动

链接

清除浮动的含义：强制一个元素移动到一个浮动元素的下方。比如你想让一个段落挨着一个浮动元素，但是强制让标题位于另一行。

clear属性定义了一个元素能在一个浮动元素的旁边还是必须要移动到它的下方。clear这个属性既能应用在浮动元素上又能应用在非浮动元素上。

未完待续…