CSS（五）脱离文档流

脱离文档流

标准文档流导致：

• 高矮不齐，底边对齐

• 空白折叠现象

  • 很多空格，都会折叠会一个空格

  • img标签有缝隙

脱离文档流：使一个元素脱离标准文档流有三种方式：

• 浮动

• 绝对定位

• 固定定位

浮动

增加浮动

增加一个浮层来放置内容。可以理解为有两层页面，一层为原页面，一层为脱离文档流的浮层页面，所以会出现折叠现象。

当容器不足以横向排列所有内容时，会换行排列。

float 属性定义元素可以往哪个方向浮动，任务元素都可以浮动：float="left" 靠左，float="right" 靠右

清除浮动

浮动的副作用：

• 浮动的子元素会造成父元素高度塌陷

• 后续元素会受到影响

有几种方式可以清除浮动：

• 父元素设置高度：父元素塌陷可以手动设置父元素的高度

• 受影响的元素增加 clear属性

  • clear="left"，清除靠左的浮动

  • clear="right"，清除靠右的浮动

  • clear="both"，清除靠左和靠右的浮动

• overflow清除浮动：父元素未设置高度且发生塌陷，并且同级元素也受到影响，在父级元素使用overflow="hidden" 和 clear="both" 清除浮动

• 伪对象方式：父元素未设置高度且发生塌陷，并且同级元素也受到影响，在父标签添加伪类after，设置空的内容，并且使用clear="both"

# 伪对象css，父标签的css类为box
.box::after{
    content:"";
    dispaly:block;
    clear:both
}

定位

position 属性制定了元素的定位类型：

• relative 相对定位

• absolute 绝对定位，会脱离文档流

• fixed 固定定位，会脱离文档流，固定定位的元素位置固定，始终在屏幕中，不受页面滚动影响

设置定位之后，可以使用四个方向值调整位置：left, top, right, bottom

div{
        position: relative;
        left: 200px;
    }

PS：相对定位和绝对定位是相对于父级元素的，会跟父级元素定位的位置调整而调整，如果父级元素没有定位。会逐级向上寻找，直到文档顶层。