高度塌陷 清除浮动 定位

2019-03-27  本文已影响0人  圣召唤

高度塌陷 父元素中的子元素浮动,导致父元素塌陷   开发中避免出现

写死父元素高度可以解决,但不能随子元素变化,不推荐

bfc 开启后具有特性 :1.开启后父元素的垂直外边距不会和子元素重叠  2.开启bfc的元素不会被浮动元素所覆盖。 3.开启bfc的元素可以包含浮动的子元素 

如何开启BFC 1.设置元素浮动 2.设置元素绝对定位 3.设置元素为inline-block 4.将元素的overfkow设置为一个非visible的值(非默认值)overflow:hidden

haslaout 用于ie6 

清除浮动 clear letf、right、both(清楚影响最大的)、none 消除浮动带来的影响 清楚浮动影响的是兄弟元素之间的浮动 父子元素不受影响  清楚浮动解决高度塌陷

解决父子高度塌陷 可用 在子元素末尾添加一个空元素,对空元素清楚浮动 可实现解决父子高度塌陷 

IE6不支持伪类

定位 position :relative  left:100px、right...、top...、bottom..

相对定位不会脱离文档流,移动后原位置存在 相对于自身定位

position absolute  绝对定位,脱离文档流 参照最近的开启了定位祖先元素的定位 都没开定位的话 绝对定位参照浏览器起点   绝对定位会使元素提升层级(覆盖效果)脱离文档流 内联元素会变成块 宽高属性会影响设置绝对定位的元素

上一篇下一篇

猜你喜欢

热点阅读