清楚浮 | 定位 | BFC

目录

• 浮动
  • 浮动的现象
• 浮动的带来问题（撑不起父盒子的高度）
• 清除浮动的方式
• 定位
  • 相对定位 relative
  • 绝对定位 absolute
    • 如果单独设置一个盒子为绝对定位，
    • 子绝父相
    • 特征

浮动

布局方案

作用：实现元素并排

浮动的现象

• 脱离了标准文档流，不在页面上占位置

• 贴边现象

• 收缩效果

  浮动的带来问题（撑不起父盒子的高度）

  清除浮动的方式

• 给父元素添加固定高度 （不灵活，后期不易维护）
  

  • 应用：万年不变导航栏

• 内墙法：给最后一个浮动元素的后面添加一个空的块级标签，并且设置该标签的属性为clear:both;
  问题：冗余
  

• 伪元素清除法 推荐大家使用
  .clearfix::after{
      content:'';
      display: block;
      clear: both;
      /*visibility: hidden;*/
      /*height: 0;*/
  }
  

• overflow:hidden; 常用
  
  因为overflow:hidden;会形成BFC区域，形成BFC区域之后，内部有它的布局规则
  计算BFC的高度时，浮动元素也参与计算
  但是小心overflow：hidden它自己的本意
  

定位

position:static | relative | absolute | fixed;
		 静态      相对        绝对        固定

相对定位 relative

特征：

• 与标准文档流下的盒子没有任何区别
• 留“坑”，会影响页面布局

作用：

做“子绝父相”布局方案的参考

参考点：

以原来的盒子为参考点

绝对定位 absolute

参考点

如果单独设置一个盒子为绝对定位，

以top描述，它的参考点是以body的（0，0）为参考点
以bottom描述，它的参考点是以浏览器的左下角为参考点

子绝父相

以最近的父辈元素的左上角为参考点进行定位

特征

1.脱标
2.压盖
3.子绝父相