目录
🌳浮动
🍀去浮动
🍃方法一
🍃方法二
🍃方法三
🌳定位
🍀相对定位
🍀绝对定位
🍀固定定位
🌳转义字符
浮动
浮动会脱离文档流.导致,原来的盒子(容器)不会占据本来的空间.
d1和d2设置浮动后脱离文档流,所以d3前面会认为没有其他容器,就会往上移.
去浮动
方法一
给浮动元素的父元素添加高度 （仅适用于高度确定情况）
方法二
在给浮动元素的父元素后边添加空白div，设置clear:both
方法三
定位
相对定位
例如:将红色方块(n1)移动到黄色方块(n2)右边位置.
绝对定位
将红色方块(n1)移动到黄色方块(n2)右边位置.
首先,absolute会脱离文档流,黄色方块(n2)就会上移到原来红色方块的位置.
其次,absolute定位会根据离他最近的有定位属性的父类元素,如果父类元素没有设置定位属性,就会一直向上找,直到找到最顶部的html,所以会出现页面中红色放回位置偏移的情况.
解决方法就是,可以给红色方块(n1)的父类元素添加一个定位属性.
固定定位
固定定位是相对浏览器来设置位置的.无论页面上下滚动,两个方块的位置始终处于设置的相对于浏览的位置.
转义字符
