浮动与定位

基础知识

浮动最本质的功能：用来实现并排
两个注意事项：

1. 所有的浮动元素都要加上 float:left。
2. 父盒子的width 需要大于 所有元素的width和 不然 元素会掉到下一行。

顺序贴靠特性：
如果没有足够空间，则会寻找再前一个兄弟元素贴靠。

浮动的元素一定设置宽高
即使是span标签或者a标签，因为其已经脱离文档流，不再区分 块级元素 还是 行内元素。

只有并排排的盒子才要设置浮动
大盒子带着小盒子跑。

大同与太原组成一个div， 保定和石家庄组成一个div 这两个大div 设置float即可。

BFC规范

BFC（Box Formatting Context,块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之亦然。

如何创建BFC：

1. 设置float。
2. position不是static或者relative。
3. display设为inline-block，flex或者inline-flex。
4. overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏。

BFC的其他作用：

1. BFC可以取消盒子margin塌陷。
2. BFC可以阻止元素被浮动元素覆盖。

浮动与定位

原文：https://www.cnblogs.com/cwlrk/p/14458895.html