H5浮动与定位

Posted 2021-03-08 yaoqianss

H5的奇妙之处就在于它的变幻莫测，接下来我想谈一下我对定位浮动的认知。

什么是浮动
首先要了解什么是浮动：脱离文档流，默认在当前的行对既定的方向进行移动（默认横排）。

用浮动可以解决什么问题
使用浮动之前我们要想明白浮动都可以解决什么问题：比如我们要放一排的div或是img，我们故可以通过调试margin之类的属性解决，但是有时会发现即便如此有时仍会产生空隙，我们就可以通过浮动来解决这一问题。再比如有时后我们需要一些标签不会占据文档流的显示，这时候也可以选择使用。

浮动会出现什么问题
但是浮动往往会产生一些问题：如：浮动自定义换行，浮动坍塌，浮动遮盖。

自定义换行：比如浮动往往是在遇到其他浮动块或是到既定边缘才会进行换行
浮动坍塌：因为浮动脱离文档流所以可以看起不再占据位置，这样就会导致父元素的长宽减小。导致子元素超出父元素
浮动遮盖：也是因为脱离文档流的原因，与浮动块同级的块级元素会重叠。
怎么清除浮动
因此我们要学会清除浮动，清除浮动就是为了解决上面的问题，有的解决方法是通过给float以外的块设定好属性，有的是清除浮动了，虽然两者效果可能相同，但前者的维护性和书写性实在是不很不友好，所以我主要写后者。
5. 给浮动块结尾一个空div并设置上clear:both属性。
其原理是float元素是不会在普通流中计算高度，拥有clear属性的div是在普通流中的，通过 “自动” 增加 上外边距(margin-top) 实现撑开父元素
6.给浮动块的元素加上一个after的伪类 并且设置为block 和 clear:both.
7.给浮动元素父容器加overflow:hidden.

什么是定位？
定位position，由边偏距和定位模式组成。

边偏距，4个，分别是top、bottom、left、right：后面可以%，还可以px等。

重点记一下定位模式：相对定位，绝对定位，固定定位。
相对定位relative：每次移动都以自己左上方的点为基准移动； 占有原来的位置。

绝对定位absolute：通过边偏移来移动位置，但它完全脱标，完全不占位置。 1. 父级元素无定位时，则子级元素的绝对定位以浏览器当前的屏幕为准； 2. 父级元素有定位时，则子级元素的绝对定位以最近的已经定位（相对、绝对、固定）的父级元素进行定位。

固定定位fixed：跟父级元素没有关系，只跟浏览有关； 固定定位完全脱标，不占位置。
好了，以上就是我对浮动与定位的认知。