浮动和定位

目录​​​​​​​

🌳浮动

🍀去浮动

🍃方法一

🍃方法二

🍃方法三

🌳定位

🍀相对定位

🍀绝对定位

🍀固定定位

🌳转义字符

---

浮动

浮动会脱离文档流.导致,原来的盒子(容器)不会占据本来的空间.

d1和d2设置浮动后脱离文档流,所以d3前面会认为没有其他容器,就会往上移.

去浮动

方法一

给浮动元素的父元素添加高度 （仅适用于高度确定情况）

方法二

在给浮动元素的父元素后边添加空白div，设置clear:both

方法三

定位

相对定位

例如:将红色方块(n1)移动到黄色方块(n2)右边位置.

绝对定位

将红色方块(n1)移动到黄色方块(n2)右边位置.

首先,absolute会脱离文档流,黄色方块(n2)就会上移到原来红色方块的位置.

其次,absolute定位会根据离他最近的有定位属性的父类元素,如果父类元素没有设置定位属性,就会一直向上找,直到找到最顶部的html,所以会出现页面中红色放回位置偏移的情况.

解决方法就是,可以给红色方块(n1)的父类元素添加一个定位属性.

固定定位

      固定定位是相对浏览器来设置位置的.无论页面上下滚动,两个方块的位置始终处于设置的相对于浏览的位置.

转义字符