第10章 浮动及其形状

与使用表格布局基本一样,把浮动作为布局工具算是无奈之举,那时别无他选.

这说的好沧桑......

10.1 浮动

10.1.1 浮动的元素

• 浮动的元素脱离了常规的文档流,不过对布局仍有影响.
• 元素浮动后,其他内容将围绕它流动
• 浮动元素四周的边距不折叠
• 要为非置换浮动元素设置宽度,否则其宽度走近于0

10.1.2 浮动详解

浮动元素的容纳块是最近的块级祖辈元素.不管元素是什么类型,浮动后得到的都是块级框.

• 关于左右边
  • 浮动元素的左右外边界不能超过容纳块的内边界
  • 元素浮动后,同行的元素会紧靠它
  • 元素浮动后,同行的元素宽大于剩余空间宽时会换行
  • 浮动元素不能超过容纳块的宽度,除非他本身的宽度太宽
• 关于顶边
  • 浮动元素的上边不能比父元素的内顶边高
  • 浮动元素的顶边不能超过前面的浮动/块级元素的顶边
  • 顶边不能高于浮动元素之前的元素生成的行框的顶边
  • 浮动元素必须放在尽可能高的位置上
• 位置越高,向左/右移动的距离越远

10.1.3 具体行为

浮动的元素比父元素高

• 会从父元素的底部早冒出去

浮动元素的后代也浮动时

• 将会扩大浮动范围

浮动元素在内容流内又在内容流外

• 会导致背景被浮动遮挡,但文字被挤开

负外边距对浮动的影响

• 负外边距将浮动元素移到父元素的外面
• 能导致元素比父元素宽

浮动的概念太多了,好多效果也不知所以然,现在用浮动也用的非常少,暂时就先这样吧.感觉概念看了一堆,但是复现不出来

10.1.4 浮动元素与内容重叠

• 与行内框重叠时
  • 边框,背景和内容都在浮动元素上渲染
• 与块级框重叠时
  • 边框和背景在浮动元素后渲染
  • 内容在浮动元素上渲染

10.2 清除浮动

只适用于块级元素.让当前元素远离浮动元素,即另起一行.其原理是,在元素的边边距之外,增加间距,刚好把元素推到浮动元素下边

10.3 浮动形状

由于IE完全不支持这些属性,所以市面上很少看到有人用.并且这个东西感觉主要应用在图文排版上面.平时接触的会非常少,所以就先做个笔记,以后如果有相关创意或需求的时候,再来仔细复现代码.

10.3.1 定义形状shape-outside

如果图像有透明部分,那么内容将流入透明的部分...如果浮动框没有透明部分,也可以通过定义形状框来让内容流进来

shape-outside = basic-shape + shape-box

basic-shape: 形状框的类型

• inset: 内凹形状
  • 计算内偏移时可以为形状定义圆角,注意和 border-radius的区别
• circle: 圆形
  • 形状框不会超出浮动框,超出部分会被裁剪
• ellipse: 椭圆形
• polygon: 多边形,类似百度地图的遮罩
  • 可以用过chrome开发者工具的Shape Editor工具可视化操作

10.3.2 使用透明图像定义形状shape-image-threshold

指定透明度为多少时,才允许内容流入.

10.3.3 为形状添加外边距shape-margin

其原理和margin一样,只不过,增加后的尺寸,如果超出了浮动框,则会被裁剪