CSS中li设置左浮动后,li下面的a控制位置方式为:
li a{margin-left:20pxmargin-top:12pxdisplay:blockwidth:20px}
详情:
a标签写样式时要加display:block属性,
这样a标签就显示一行了。
一个li下面有多个a标签的话,就得给他们定宽度,
必要的情况下就float:left。
说浮动布局,就得先知道文档流,文档流有 正常文档流 、 脱离文档流 。
对应的正常文档流如图,
例如01:
结果:
分析:对div01设置了左浮动,使div01脱离了文档流,div01是在div02的上面一层,实际的div02还是占据了一整行,div02的文字部分看着像被挤出来了,其实这就是文字环绕的实现(文字是英文时有点问题)。
例如02:
只设置后面两个div左浮动
结果:
例如03:
全部设置左浮动,会从左到右依次排列。(right的相反)注意这里出现了父元素高度塌陷,height为0
2.浮动带来的影响
效果如图:对比例3,父元素高度塌陷问题解决
此外,浮动可以用来实现两列布局或多列布局
例如:
结果: