CSS浮动

CSS浮动

一.float属性

该属性设置元素是否浮动

可选值

1. none 不浮动（默认值）
2. left 向左浮动
3. 向右浮动

二.浮动

浮动有方向之分，即向左浮动/向右浮动；
浮动的元素会脱离文本流，并最大程度的移动到左上/右上角（如果可以，优先向上移），直到遇到父元素的边框或者其他的浮动元素。

                           浮动前                                                                                         两个div都向左浮动

                                          

---

浮动元素会覆盖没有开启BFC(Block Formatting Context)的元素；如果要将上面的蓝色的div设置左浮动，而绿色的不设置浮动，那么因为蓝色的div脱离文档流，它下面的元素就会上移，也就是说，绿色的div会上移，然而因为绿色的div没有开启BFC，所以会被覆盖。

虽然会覆盖元素，但不会覆盖文字，文字会环绕周围，这次加上文字来看一下

<div class="block1"></div> <!-- 设置了左浮动 -->
<div class="block2">这里是被覆盖的div</div>

 

这次将第二个div的大小变大一点，便于观察

 

---

如果浮动的元素上面是一个没有浮动的块元素，那么浮动的元素不会超过它上面的没有浮动的块元素（文档流中的块元素独占一行）

 

---

块元素脱离文档流后，默认的width由内容决定，而不是父元素。