浮动和定位

目录​​​​​​​

浮动

去浮动

方法一

方法二

方法三

定位

相对定位

绝对定位

固定定位

转义字符


浮动

浮动和定位_第1张图片

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

浮动和定位_第2张图片

浮动和定位_第3张图片

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

去浮动

浮动和定位_第4张图片

方法一

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

浮动和定位_第5张图片

方法二

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

浮动和定位_第6张图片

方法三

浮动和定位_第7张图片

定位

浮动和定位_第8张图片

浮动和定位_第9张图片

相对定位

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

浮动和定位_第10张图片

绝对定位

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

浮动和定位_第11张图片

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

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

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

浮动和定位_第12张图片

固定定位

浮动和定位_第13张图片浮动和定位_第14张图片

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

转义字符

浮动和定位_第15张图片

你可能感兴趣的:(HTML,前端,css)