Float 浮动+position

omgEn
258 阅读3分钟

浮动原理

  1. 浮动会脱离文档流
  2. 浮动的元素互相贴靠
    • 即浮动的元素会找最近的浮动元素靠着；
    • 浮动的圆碰到浮动的元素会停止浮动
  3. 浮动元素会挡住背景但不会挡内容
    • 即如果有文字，没有设置浮动的元素内容会绕着浮动元素走
  4. 浮动会div正常会独占一行，但是设置了浮动就会根据内容占据最小的位置
  5. 浮动默认排列在一排，遇到边界换行
  6. 浮动不占位置，即当子元素都是浮动的，父元素高度为0
    • 即父元素是不能被浮动的子元素撑出高度的
    • 这就需要清除浮动造成的影响

清除浮动

  1. 给浮动的父元素加height
    • 如果浮动在一个有高度的盒子中，则这个盒子不会影响后面浮动的元素了。
    • 缺点：只适合高度固定的布局，不推荐生适用
  2. clear:botn
    • 实际开发中，height很少出现，因为内容可以撑起宽高
    • 对不浮动的盒子二写clear:both,可以清楚上一个浮动盒子一对他造成的影响
  3. 在浮动的元素下方加空div
    • 即在父元素里面最下面div
      div{clear:both;height:0;overflow:hidden;}
  4. 给父元素加上overflow：hidden
    • 此时父元素能被浮动的子元素撑出高度。
  5. 万能清除浮动法
.clearfix {
    *zoom: 1;
}
.clearfix::after {
    content: "";//伪元素一定要有这个
    display: block;
    height: 0;
    overflow: hidden;//为了不被显示
    clear: both;
}

给背景图加竖条

	.bdr {position:relative;}
	.bdr:after {
		content:' ';
		postiton:absolute;
		background:#d4d4d4;
		height: 16px;
		width:1px;
		right:0;
		top:4px;
	}

position

  1. static: 默认值。始终处于文档给予的位置
  2. absulute:脱离文档流不占空间
    • 参照相对于最近的已定位的父元素定位；层级很高
  3. relative:相对本身原来的位置定位；不会脱离文档流
    • 偏移出去的内容不占空间，即元素任然占据原来的空间
  4. fixed:相对于浏览器的绝对定位，不占位（脱离文档流）
  5. sticky:粘性定位（新增属性）
    • 兼容性很差，ios支持，Android不支持，低版本浏览器无法使用
      注：relative可以和float使用，absolute和float一起用会把浮动的效果清除

设置relative占据原本的位置，而导致的空白问题

解决方案：

  1. 添加margin-:-number
  2. 给父级添加position:relative 没试过
  3. 尽量降低relative属性对其他元素或者布局的潜在影响
    • absulute的定位不受限于relative使用margin定位
    • 最小化元素(将需要设置relative的块限制在最小范围内)

定位元素层叠属性

z-index:auto|number

  1. 当两个绝对定位属性的此属性具有同样的number值，则按照他们在html中声明的顺序层叠
  2. 此属性仅仅作用域position属性值为relative或absolyte的对象 relative也可以吗

脱离文档流的情况

  1. float
  2. position: absolute
  3. position: fixed
  • 脱离文档里的特性
    • 不区分行和块？
    • 如果本元素未设置宽高，脱离文档流后的宽高由其子元素撑开
    • 字围效果
    • 贴靠现象
  • 清除浮动
    • 给浮动的元素设置高，这样就不会影响后面的元素
    • 给浮动的元素添加clear:both;但是margin会失效？不对把
avatar
文章
阅读
粉丝