Skip to main content

浮动和定位

浮动​

  • 浮动的最本质功能：用来实现并排。

浮动的使用​

  • 浮动使用要点：要浮动，并排的盒子都要设置浮动
  • 父盒子要有足够的宽度，否则子盒子会掉下去

浮动的顺序贴靠特性​

子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素

浮动的元素一定能设置宽高​

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是 span 或者 a 标签等

右浮动​

float:right; 即可设置右浮动

注意事项
  • 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！
  • "大盒子带着小盒子跑"，一个大盒子中，又是一个小天地，内部可以继续使用浮动
  • 超市售卖的塑料袋 0.3 元一个，div 是免费的！不要节约盒子！

清除浮动​

浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响。

  1. 让内部有浮动的父盒子形成 BFC，它就能关闭住内部的浮动。此时最好的方法就是 overflow:hidden 属性。
  2. 给后面的父盒子设置 clear:both 属性。clear 表示清除浮动对自己的影响，both 表示左右浮动都清除。
  3. 使用 ::after 伪元素给盒子添加最后一个子元素，并且给 ::after 设置 clear:both.
  4. 在两个父盒子之间"隔墙"，隔一个携带 clear:both 的盒子。

BFC 规范​

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

从一个现象开始说起​

  • 一个盒子不设置 height，当内容子元素都浮动时，无法撑起自身
  • 这个盒子没有形成 BFC

如何创建 BFC​

  • float 的值不是 none
  • position 的值不是 static 或者 relative
  • display 的值是 inline-block、flex 或者 inline-flex
  • overflow:hidden;

什么是溢出隐藏​

  • overflow:hidden; 表示溢出隐藏，溢出盒子边框的内容将会被隐藏
  • overflow:hidden; 是非常好用的让盒子形成 BFC 的方法

BFC 的其他作用​

  • BFC 可以取消盒子 margin 塌陷
  • BFC 可以可以阻止元素被浮动元素覆盖

浏览器差异​

  • IE6、7 浏览器使用 haslayout 机制，和 BFC 规范略有差异，比如 IE 浏览器可以使用 zoom:1 属性"让盒子拥有 layout"
  • 如果要制作兼容到 IE6、7 的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置 height 属性，规范编程，不要"玩杂技"